<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/dev/text-level-semantics.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:36:25 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard, Edition for Web Developers</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  <script async="" src=search.js></script>
  
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   
   <hgroup><h1><a rel=home href=index.html>HTML: The Living Standard</a></h1><p id=dev-edition-h2>Edition for Web Developers — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   

   <div id=search>
    <input placeholder="Search. Press '/'" autocomplete=off name=query id=query type=search>
    <ol id=results></ol>
   </div>
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=grouping-content.html>← 4.4 Grouping content</a> — <a href=index.html>Table of Contents</a> — <a href=links.html>4.6 Links →</a></nav><ol class=toc><li><ol><li><a href=text-level-semantics.html#text-level-semantics><span class=secno>4.5</span> Text-level semantics</a><ol><li><a href=text-level-semantics.html#the-a-element><span class=secno>4.5.1</span> The <code>a</code> element</a><li><a href=text-level-semantics.html#the-em-element><span class=secno>4.5.2</span> The <code>em</code> element</a><li><a href=text-level-semantics.html#the-strong-element><span class=secno>4.5.3</span> The <code>strong</code> element</a><li><a href=text-level-semantics.html#the-small-element><span class=secno>4.5.4</span> The <code>small</code> element</a><li><a href=text-level-semantics.html#the-s-element><span class=secno>4.5.5</span> The <code>s</code> element</a><li><a href=text-level-semantics.html#the-cite-element><span class=secno>4.5.6</span> The <code>cite</code> element</a><li><a href=text-level-semantics.html#the-q-element><span class=secno>4.5.7</span> The <code>q</code> element</a><li><a href=text-level-semantics.html#the-dfn-element><span class=secno>4.5.8</span> The <code>dfn</code> element</a><li><a href=text-level-semantics.html#the-abbr-element><span class=secno>4.5.9</span> The <code>abbr</code> element</a><li><a href=text-level-semantics.html#the-ruby-element><span class=secno>4.5.10</span> The <code>ruby</code> element</a><li><a href=text-level-semantics.html#the-rt-element><span class=secno>4.5.11</span> The <code>rt</code> element</a><li><a href=text-level-semantics.html#the-rp-element><span class=secno>4.5.12</span> The <code>rp</code> element</a><li><a href=text-level-semantics.html#the-data-element><span class=secno>4.5.13</span> The <code>data</code> element</a><li><a href=text-level-semantics.html#the-time-element><span class=secno>4.5.14</span> The <code>time</code> element</a><li><a href=text-level-semantics.html#the-code-element><span class=secno>4.5.15</span> The <code>code</code> element</a><li><a href=text-level-semantics.html#the-var-element><span class=secno>4.5.16</span> The <code>var</code> element</a><li><a href=text-level-semantics.html#the-samp-element><span class=secno>4.5.17</span> The <code>samp</code> element</a><li><a href=text-level-semantics.html#the-kbd-element><span class=secno>4.5.18</span> The <code>kbd</code> element</a><li><a href=text-level-semantics.html#the-sub-and-sup-elements><span class=secno>4.5.19</span> The <code>sub</code> and <code>sup</code> elements</a><li><a href=text-level-semantics.html#the-i-element><span class=secno>4.5.20</span> The <code>i</code> element</a><li><a href=text-level-semantics.html#the-b-element><span class=secno>4.5.21</span> The <code>b</code> element</a><li><a href=text-level-semantics.html#the-u-element><span class=secno>4.5.22</span> The <code>u</code> element</a><li><a href=text-level-semantics.html#the-mark-element><span class=secno>4.5.23</span> The <code>mark</code> element</a><li><a href=text-level-semantics.html#the-bdi-element><span class=secno>4.5.24</span> The <code>bdi</code> element</a><li><a href=text-level-semantics.html#the-bdo-element><span class=secno>4.5.25</span> The <code>bdo</code> element</a><li><a href=text-level-semantics.html#the-span-element><span class=secno>4.5.26</span> The <code>span</code> element</a><li><a href=text-level-semantics.html#the-br-element><span class=secno>4.5.27</span> The <code>br</code> element</a><li><a href=text-level-semantics.html#the-wbr-element><span class=secno>4.5.28</span> The <code>wbr</code> element</a><li><a href=text-level-semantics.html#usage-summary><span class=secno>4.5.29</span> Usage summary</a></ol></ol></ol><h3 id=text-level-semantics><span class=secno>4.5</span> Text-level semantics<a href=#text-level-semantics class=self-link></a></h3>

  <h4 id=the-a-element><span class=secno>4.5.1</span> The <dfn data-dfn-type=element><code>a</code></dfn> element<a href=#the-a-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a title="The <a> HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.">Element/a</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-a-element:concept-element-categories>Categories</a>:<dd><a id=the-a-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-a-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd>If the element has an <code id=the-a-element:attr-hyperlink-href><a href=links.html#attr-hyperlink-href>href</a></code> attribute: <a id=the-a-element:interactive-content-2 href=dom.html#interactive-content-2>Interactive content</a>.<dd><a id=the-a-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-a-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-a-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-a-element:concept-element-content-model>Content model</a>:<dd><a id=the-a-element:transparent href=dom.html#transparent>Transparent</a>, but there must be no <a id=the-a-element:interactive-content-2-2 href=dom.html#interactive-content-2>interactive content</a> descendant,
   <code id=the-a-element:the-a-element><a href=#the-a-element>a</a></code> element descendant, or descendant with the <code id=the-a-element:attr-tabindex><a href=interaction.html#attr-tabindex>tabindex</a></code> attribute specified.<dt><a href=dom.html#concept-element-tag-omission id=the-a-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-a-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-a-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-a-element:attr-hyperlink-href-2><a href=links.html#attr-hyperlink-href>href</a></code> —  Address of the <a id=the-a-element:hyperlink href=links.html#hyperlink>hyperlink</a>
     <dd><code id=the-a-element:attr-hyperlink-target><a href=links.html#attr-hyperlink-target>target</a></code> —  <a id=the-a-element:navigable href=document-sequences.html#navigable>Navigable</a> for <a id=the-a-element:hyperlink-2 href=links.html#hyperlink>hyperlink</a> <a href=browsing-the-web.html#navigate id=the-a-element:navigate>navigation</a>
     <dd><code id=the-a-element:attr-hyperlink-download><a href=links.html#attr-hyperlink-download>download</a></code> —  Whether to download the resource instead of navigating to it, and its filename if so
     <dd><code id=the-a-element:ping><a href=links.html#ping>ping</a></code> —  <a href=https://url.spec.whatwg.org/#concept-url id=the-a-element:url data-x-internal=url>URLs</a> to ping
     <dd><code id=the-a-element:attr-hyperlink-rel><a href=links.html#attr-hyperlink-rel>rel</a></code> —  Relationship between the location in the document containing the <a id=the-a-element:hyperlink-3 href=links.html#hyperlink>hyperlink</a> and the destination resource
     <dd><code id=the-a-element:attr-hyperlink-hreflang><a href=links.html#attr-hyperlink-hreflang>hreflang</a></code> —  Language of the linked resource
     <dd><code id=the-a-element:attr-hyperlink-type><a href=links.html#attr-hyperlink-type>type</a></code> —  Hint for the type of the referenced resource
     <dd><code id=the-a-element:attr-hyperlink-referrerpolicy><a href=links.html#attr-hyperlink-referrerpolicy>referrerpolicy</a></code> —  <a id=the-a-element:referrer-policy href=https://w3c.github.io/webappsec-referrer-policy/#referrer-policy data-x-internal=referrer-policy>Referrer policy</a> for <a href=https://fetch.spec.whatwg.org/#concept-fetch id=the-a-element:concept-fetch data-x-internal=concept-fetch>fetches</a> initiated by the element
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-a-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd>If the element has an <code id=the-a-element:attr-hyperlink-href-3><a href=links.html#attr-hyperlink-href>href</a></code> attribute: <a href=https://w3c.github.io/html-aria/#el-a>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-a>for implementers</a>.<dd>Otherwise: <a href=https://w3c.github.io/html-aria/#el-a-no-href>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-a-no-href>for implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-a-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLAnchorElement</code>.</dl>

  <p>If the <code id=the-a-element:the-a-element-2><a href=#the-a-element>a</a></code> element has an <code id=the-a-element:attr-hyperlink-href-4><a href=links.html#attr-hyperlink-href>href</a></code> attribute,
  then it <a id=the-a-element:represents href=dom.html#represents>represents</a> a <a id=the-a-element:hyperlink-4 href=links.html#hyperlink>hyperlink</a> (a hypertext anchor) labeled by its
  contents.</p>

  

  <p>If the <code id=the-a-element:the-a-element-3><a href=#the-a-element>a</a></code> element has no <code id=the-a-element:attr-hyperlink-href-5><a href=links.html#attr-hyperlink-href>href</a></code> attribute,
  then the element <a id=the-a-element:represents-2 href=dom.html#represents>represents</a> a placeholder for where a link might otherwise have been
  placed, if it had been relevant, consisting of just the element's contents.</p>

  <p>The <code id=the-a-element:attr-hyperlink-target-2><a href=links.html#attr-hyperlink-target>target</a></code>, <code id=the-a-element:attr-hyperlink-download-2><a href=links.html#attr-hyperlink-download>download</a></code>, <code id=the-a-element:ping-2><a href=links.html#ping>ping</a></code>,
  <code id=the-a-element:attr-hyperlink-rel-2><a href=links.html#attr-hyperlink-rel>rel</a></code>, <code id=the-a-element:attr-hyperlink-hreflang-2><a href=links.html#attr-hyperlink-hreflang>hreflang</a></code>, <code id=the-a-element:attr-hyperlink-type-2><a href=links.html#attr-hyperlink-type>type</a></code>,
  and <code id=the-a-element:attr-hyperlink-referrerpolicy-2><a href=links.html#attr-hyperlink-referrerpolicy>referrerpolicy</a></code> attributes must be omitted
  if the <code id=the-a-element:attr-hyperlink-href-6><a href=links.html#attr-hyperlink-href>href</a></code> attribute is not present.</p>

  <p>If the <code id=the-a-element:names:-the-itemprop-attribute><a href=microdata.html#names:-the-itemprop-attribute>itemprop</a></code> attribute is specified on an <code id=the-a-element:the-a-element-4><a href=#the-a-element>a</a></code> element,
  then the <code id=the-a-element:attr-hyperlink-href-7><a href=links.html#attr-hyperlink-href>href</a></code> attribute must also be specified.</p>

  <div class=example>

   <p>If a site uses a consistent navigation toolbar on every page, then the link that would
   normally link to the page itself could be marked up using an <code id=the-a-element:the-a-element-5><a href=#the-a-element>a</a></code> element:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>nav</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>ul</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/&quot;</c-><c- p>&gt;</c->Home<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/news&quot;</c-><c- p>&gt;</c->News<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>a</c-><c- p>&gt;</c->Examples<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/legal&quot;</c-><c- p>&gt;</c->Legal<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>ul</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>nav</c-><c- p>&gt;</c-></code></pre>

  </div>

  

  <dl class=domintro><dt><code><var>a</var>.<span id=dom-a-text>text</span></code><dd><p>Same as <code id=the-a-element:textcontent><a data-x-internal=textcontent href=https://dom.spec.whatwg.org/#dom-node-textcontent>textContent</a></code>.</dl>

  

  <div class=example>
   <p>The <code id=the-a-element:the-a-element-6><a href=#the-a-element>a</a></code> element can be wrapped around entire paragraphs, lists, tables, and so
   forth, even entire sections, so long as there is no interactive content within (e.g., buttons or
   other links). This example shows how this can be used to make an entire advertising block into a
   link:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>aside</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;advertising&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->Advertising<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;https://ad.example.com/?adid=1929&amp;amp;pubid=1422&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>section</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->Mellblomatic 9000!<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Turn all your widgets into mellbloms!<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Only $9.99 plus shipping and handling.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>section</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;https://ad.example.com/?adid=375&amp;amp;pubid=1422&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>section</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->The Mellblom Browser<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Web browsing at the speed of light.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->No other browser goes faster!<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>section</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>aside</c-><c- p>&gt;</c-></code></pre>
  </div>

  <div class=example>
   <p>The following example shows how a bit of script can be used to effectively make an entire row
   in a job listing table a hyperlink:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>table</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c->Position
  <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c->Team
  <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c->Location
 <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/jobs/manager&quot;</c-><c- p>&gt;</c->Manager<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->Remotees
  <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->Remote
 <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/jobs/director&quot;</c-><c- p>&gt;</c->Director<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->Remotees
  <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->Remote
 <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/jobs/astronaut&quot;</c-><c- p>&gt;</c->Astronaut<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->Architecture
  <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->Remote
<c- p>&lt;/</c-><c- f>table</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
document<c- p>.</c->querySelector<c- p>(</c-><c- u>&quot;table&quot;</c-><c- p>).</c->onclick <c- o>=</c-> <c- p>({</c-> target <c- p>})</c-> <c- p>=&gt;</c-> <c- p>{</c->
  <c- k>if</c-> <c- p>(</c->target<c- p>.</c->parentElement<c- p>.</c->localName <c- o>===</c-> <c- u>&quot;tr&quot;</c-><c- p>)</c-> <c- p>{</c->
    <c- a>const</c-> link <c- o>=</c-> target<c- p>.</c->parentElement<c- p>.</c->querySelector<c- p>(</c-><c- u>&quot;a&quot;</c-><c- p>);</c->
    <c- k>if</c-> <c- p>(</c->link<c- p>)</c-> <c- p>{</c->
      link<c- p>.</c->click<c- p>();</c->
    <c- p>}</c->
  <c- p>}</c->
<c- p>}</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>
  </div>


  <h4 id=the-em-element><span class=secno>4.5.2</span> The <dfn data-dfn-type=element><code>em</code></dfn> element<a href=#the-em-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em title="The <em> HTML element marks text that has stress emphasis. The <em> element can be nested, with each level of nesting indicating a greater degree of emphasis.">Element/em</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-em-element:concept-element-categories>Categories</a>:<dd><a id=the-em-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-em-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-em-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-em-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-em-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-em-element:concept-element-content-model>Content model</a>:<dd><a id=the-em-element:phrasing-content-2-3 href=dom.html#phrasing-content-2>Phrasing content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-em-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-em-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-em-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-em-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-em>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-em>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-em-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLElement</code>.</dl>

  <p>The <code id=the-em-element:the-em-element><a href=#the-em-element>em</a></code> element <a id=the-em-element:represents href=dom.html#represents>represents</a> stress emphasis of its contents.</p>

  <p>The level of stress that a particular piece of content has is given by its number of ancestor
  <code id=the-em-element:the-em-element-2><a href=#the-em-element>em</a></code> elements.</p>

  <p>The placement of stress emphasis changes the meaning of the sentence. The element thus forms an
  integral part of the content. The precise way in which stress is used in this way depends on the
  language.</p>

  <div class=example>

   <p>These examples show how changing the stress emphasis changes the meaning. First, a general
   statement of fact, with no stress:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Cats are cute animals.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>By emphasizing the first word, the statement implies that the kind of animal under discussion
   is in question (maybe someone is asserting that dogs are cute):</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>em</c-><c- p>&gt;</c->Cats<c- p>&lt;/</c-><c- f>em</c-><c- p>&gt;</c-> are cute animals.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>Moving the stress to the verb, one highlights that the truth of the entire sentence is in
   question (maybe someone is saying cats are not cute):</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Cats <c- p>&lt;</c-><c- f>em</c-><c- p>&gt;</c->are<c- p>&lt;/</c-><c- f>em</c-><c- p>&gt;</c-> cute animals.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>By moving it to the adjective, the exact nature of the cats is reasserted (maybe someone
   suggested cats were <em>mean</em> animals):</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Cats are <c- p>&lt;</c-><c- f>em</c-><c- p>&gt;</c->cute<c- p>&lt;/</c-><c- f>em</c-><c- p>&gt;</c-> animals.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>Similarly, if someone asserted that cats were vegetables, someone correcting this might
   emphasize the last word:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Cats are cute <c- p>&lt;</c-><c- f>em</c-><c- p>&gt;</c->animals<c- p>&lt;/</c-><c- f>em</c-><c- p>&gt;</c->.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>By emphasizing the entire sentence, it becomes clear that the speaker is fighting hard to get
   the point across. This kind of stress emphasis also typically affects the punctuation, hence the
   exclamation mark here.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>em</c-><c- p>&gt;</c->Cats are cute animals!<c- p>&lt;/</c-><c- f>em</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>Anger mixed with emphasizing the cuteness could lead to markup such as:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>em</c-><c- p>&gt;</c->Cats are <c- p>&lt;</c-><c- f>em</c-><c- p>&gt;</c->cute<c- p>&lt;/</c-><c- f>em</c-><c- p>&gt;</c-> animals!<c- p>&lt;/</c-><c- f>em</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=note>

   <p>The <code id=the-em-element:the-em-element-3><a href=#the-em-element>em</a></code> element isn't a generic "italics" element. Sometimes, text is intended to
   stand out from the rest of the paragraph, as if it was in a different mood or voice. For this,
   the <code id=the-em-element:the-i-element><a href=#the-i-element>i</a></code> element is more appropriate.</p>

   <p>The <code id=the-em-element:the-em-element-4><a href=#the-em-element>em</a></code> element also isn't intended to convey importance; for that purpose, the
   <code id=the-em-element:the-strong-element><a href=#the-strong-element>strong</a></code> element is more appropriate.</p>

   

  </div>



  <h4 id=the-strong-element><span class=secno>4.5.3</span> The <dfn data-dfn-type=element><code>strong</code></dfn> element<a href=#the-strong-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong title="The <strong> HTML element indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type.">Element/strong</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>4+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-strong-element:concept-element-categories>Categories</a>:<dd><a id=the-strong-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-strong-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-strong-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-strong-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-strong-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-strong-element:concept-element-content-model>Content model</a>:<dd><a id=the-strong-element:phrasing-content-2-3 href=dom.html#phrasing-content-2>Phrasing content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-strong-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-strong-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-strong-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-strong-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-strong>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-strong>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-strong-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLElement</code>.</dl>

  <p>The <code id=the-strong-element:the-strong-element><a href=#the-strong-element>strong</a></code> element <a id=the-strong-element:represents href=dom.html#represents>represents</a> strong importance, seriousness, or
  urgency for its contents.</p>

  <p><strong>Importance</strong>: the <code id=the-strong-element:the-strong-element-2><a href=#the-strong-element>strong</a></code> element can be used in a heading, caption,
  or paragraph to distinguish the part that really matters from other parts that might be more
  detailed, more jovial, or merely boilerplate. (This is distinct from marking up subheadings, for
  which the <code id=the-strong-element:the-hgroup-element><a href=sections.html#the-hgroup-element>hgroup</a></code> element is appropriate.)</p>

  <p class=example>For example, the first word of the previous paragraph is marked up with
  <code id=the-strong-element:the-strong-element-3><a href=#the-strong-element>strong</a></code> to distinguish it from the more detailed text in the rest of the
  paragraph.</p>

  <p><strong>Seriousness</strong>: the <code id=the-strong-element:the-strong-element-4><a href=#the-strong-element>strong</a></code> element can be used to mark up a warning
  or caution notice.</p>

  <p><strong>Urgency</strong>: the <code id=the-strong-element:the-strong-element-5><a href=#the-strong-element>strong</a></code> element can be used to denote contents that
  the user needs to see sooner than other parts of the document.</p>

  <p>The relative level of importance of a piece of content is given by its number of ancestor
  <code id=the-strong-element:the-strong-element-6><a href=#the-strong-element>strong</a></code> elements; each <code id=the-strong-element:the-strong-element-7><a href=#the-strong-element>strong</a></code> element increases the importance of its
  contents.</p>

  <p>Changing the importance of a piece of text with the <code id=the-strong-element:the-strong-element-8><a href=#the-strong-element>strong</a></code> element does not change
  the meaning of the sentence.</p>

  <div class=example>

   <p>Here, the word "chapter" and the actual chapter number are mere boilerplate, and the actual
   name of the chapter is marked up with <code id=the-strong-element:the-strong-element-9><a href=#the-strong-element>strong</a></code>:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->Chapter 1: <c- p>&lt;</c-><c- f>strong</c-><c- p>&gt;</c->The Praxis<c- p>&lt;/</c-><c- f>strong</c-><c- p>&gt;&lt;/</c-><c- f>h1</c-><c- p>&gt;</c-></code></pre>

   <p>In the following example, the name of the diagram in the caption is marked up with
   <code id=the-strong-element:the-strong-element-10><a href=#the-strong-element>strong</a></code>, to distinguish it from boilerplate text (before) and the description
   (after):</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>figcaption</c-><c- p>&gt;</c->Figure 1. <c- p>&lt;</c-><c- f>strong</c-><c- p>&gt;</c->Ant colony dynamics<c- p>&lt;/</c-><c- f>strong</c-><c- p>&gt;</c->. The ants in this colony are
affected by the heat source (upper left) and the food source (lower right).<c- p>&lt;/</c-><c- f>figcaption</c-><c- p>&gt;</c-></code></pre>

   <p>In this example, the heading is really "Flowers, Bees, and Honey", but the author has added a
   light-hearted addition to the heading. The <code id=the-strong-element:the-strong-element-11><a href=#the-strong-element>strong</a></code> element is thus used to mark up
   the first part to distinguish it from the latter part.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;&lt;</c-><c- f>strong</c-><c- p>&gt;</c->Flowers, Bees, and Honey<c- p>&lt;/</c-><c- f>strong</c-><c- p>&gt;</c-> and other things I don&apos;t understand<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>
   <p>Here is an example of a warning notice in a game, with the
   various parts marked up according to how important they are:</p>
   
   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>strong</c-><c- p>&gt;</c->Warning.<c- p>&lt;/</c-><c- f>strong</c-><c- p>&gt;</c-> This dungeon is dangerous.
<c- p>&lt;</c-><c- f>strong</c-><c- p>&gt;</c->Avoid the ducks.<c- p>&lt;/</c-><c- f>strong</c-><c- p>&gt;</c-> Take any gold you find.
<c- p>&lt;</c-><c- f>strong</c-><c- p>&gt;&lt;</c-><c- f>strong</c-><c- p>&gt;</c->Do not take any of the diamonds<c- p>&lt;/</c-><c- f>strong</c-><c- p>&gt;</c->,
they are explosive and <c- p>&lt;</c-><c- f>strong</c-><c- p>&gt;</c->will destroy anything within
ten meters.<c- p>&lt;/</c-><c- f>strong</c-><c- p>&gt;&lt;/</c-><c- f>strong</c-><c- p>&gt;</c-> You have been warned.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>
  </div>

  <div class=example>

   <p>In this example, the <code id=the-strong-element:the-strong-element-12><a href=#the-strong-element>strong</a></code> element is used to denote the part of the text that
   the user is intended to read first.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Welcome to Remy, the reminder system.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Your tasks for today:<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>ul</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>strong</c-><c- p>&gt;</c->Turn off the oven.<c- p>&lt;/</c-><c- f>strong</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>p</c-><c- p>&gt;</c->Put out the trash.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>p</c-><c- p>&gt;</c->Do the laundry.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>ul</c-><c- p>&gt;</c-></code></pre>

  </div>


  <h4 id=the-small-element><span class=secno>4.5.4</span> The <dfn data-dfn-type=element><code>small</code></dfn> element<a href=#the-small-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small title="The <small> HTML element represents side-comments and small print, like copyright and legal text, independent of its styled presentation. By default, it renders text within it one font-size smaller, such as from small to x-small.">Element/small</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-small-element:concept-element-categories>Categories</a>:<dd><a id=the-small-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-small-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-small-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-small-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-small-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-small-element:concept-element-content-model>Content model</a>:<dd><a id=the-small-element:phrasing-content-2-3 href=dom.html#phrasing-content-2>Phrasing content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-small-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-small-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-small-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-small-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-small>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-small>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-small-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLElement</code>.</dl>

  <p>The <code id=the-small-element:the-small-element><a href=#the-small-element>small</a></code> element <a id=the-small-element:represents href=dom.html#represents>represents</a> side comments such as small print.</p>

  <p class=note>Small print typically features disclaimers, caveats, legal restrictions, or
  copyrights. Small print is also sometimes used for attribution, or for satisfying licensing
  requirements.</p>

  <p class=note>The <code id=the-small-element:the-small-element-2><a href=#the-small-element>small</a></code> element does not "de-emphasize" or lower the importance of
  text emphasized by the <code id=the-small-element:the-em-element><a href=#the-em-element>em</a></code> element or marked as important with the <code id=the-small-element:the-strong-element><a href=#the-strong-element>strong</a></code>
  element. To mark text as not emphasized or important, simply do not mark it up with the
  <code id=the-small-element:the-em-element-2><a href=#the-em-element>em</a></code> or <code id=the-small-element:the-strong-element-2><a href=#the-strong-element>strong</a></code> elements respectively.</p>

  <p>The <code id=the-small-element:the-small-element-3><a href=#the-small-element>small</a></code> element should not be used for extended spans of text, such as multiple
  paragraphs, lists, or sections of text. It is only intended for short runs of text. The text of a
  page listing terms of use, for instance, would not be a suitable candidate for the
  <code id=the-small-element:the-small-element-4><a href=#the-small-element>small</a></code> element: in such a case, the text is not a side comment, it is the main content
  of the page.</p>

  <p>The <code id=the-small-element:the-small-element-5><a href=#the-small-element>small</a></code> element must not be used for subheadings; for that purpose, use the
  <code id=the-small-element:the-hgroup-element><a href=sections.html#the-hgroup-element>hgroup</a></code> element.</p>

  <div class=example>

   <p>In this example, the <code id=the-small-element:the-small-element-6><a href=#the-small-element>small</a></code> element is used to indicate that value-added tax is
   not included in a price of a hotel room:</p>

   <pre class=example><code class='html'><c- p>&lt;</c-><c- f>dl</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c->Single room
 <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c->199 € <c- p>&lt;</c-><c- f>small</c-><c- p>&gt;</c->breakfast included, VAT not included<c- p>&lt;/</c-><c- f>small</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c->Double room
 <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c->239 € <c- p>&lt;</c-><c- f>small</c-><c- p>&gt;</c->breakfast included, VAT not included<c- p>&lt;/</c-><c- f>small</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>dl</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>In this second example, the <code id=the-small-element:the-small-element-7><a href=#the-small-element>small</a></code> element is used for a side comment in an
   article.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Example Corp today announced record profits for the
second quarter <c- p>&lt;</c-><c- f>small</c-><c- p>&gt;</c->(Full Disclosure: Foo News is a subsidiary of
Example Corp)<c- p>&lt;/</c-><c- f>small</c-><c- p>&gt;</c->, leading to speculation about a third quarter
merger with Demo Group.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>This is distinct from a sidebar, which might be multiple paragraphs long and is removed from
   the main flow of text. In the following example, we see a sidebar from the same article. This
   sidebar also has small print, indicating the source of the information in the sidebar.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>aside</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->Example Corp<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->This company mostly creates small software and Web
 sites.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The Example Corp company mission is &quot;To provide entertainment
 and news on a sample basis&quot;.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>small</c-><c- p>&gt;</c->Information obtained from <c- p>&lt;</c-><c- f>a</c->
 <c- e>href</c-><c- o>=</c-><c- s>&quot;https://example.com/about.html&quot;</c-><c- p>&gt;</c->example.com<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> home
 page.<c- p>&lt;/</c-><c- f>small</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>aside</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>In this last example, the <code id=the-small-element:the-small-element-8><a href=#the-small-element>small</a></code> element is marked as being <em>important</em>
   small print.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>strong</c-><c- p>&gt;&lt;</c-><c- f>small</c-><c- p>&gt;</c->Continued use of this service will result in a kiss.<c- p>&lt;/</c-><c- f>small</c-><c- p>&gt;&lt;/</c-><c- f>strong</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>


  <h4 id=the-s-element><span class=secno>4.5.5</span> The <dfn data-dfn-type=element><code>s</code></dfn> element<a href=#the-s-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s title="The <s> HTML element renders text with a strikethrough, or a line through it. Use the <s> element to represent things that are no longer relevant or no longer accurate. However, <s> is not appropriate when indicating document edits; for that, use the <del> and <ins> elements, as appropriate.">Element/s</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>4+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-s-element:concept-element-categories>Categories</a>:<dd><a id=the-s-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-s-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-s-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-s-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-s-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-s-element:concept-element-content-model>Content model</a>:<dd><a id=the-s-element:phrasing-content-2-3 href=dom.html#phrasing-content-2>Phrasing content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-s-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-s-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-s-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-s-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-s>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-s>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-s-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLElement</code>.</dl>

  <p>The <code id=the-s-element:the-s-element><a href=#the-s-element>s</a></code> element <a id=the-s-element:represents href=dom.html#represents>represents</a> contents that are no longer accurate or no
  longer relevant.</p>

  <p class=note>The <code id=the-s-element:the-s-element-2><a href=#the-s-element>s</a></code> element is not appropriate when indicating document edits; to
  mark a span of text as having been removed from a document, use the <code id=the-s-element:the-del-element><a href=edits.html#the-del-element>del</a></code> element.</p>

  <div class=example>

   <p>In this example a recommended retail price has been marked as no longer relevant as the
   product in question has a new sale price.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Buy our Iced Tea and Lemonade!<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>s</c-><c- p>&gt;</c->Recommended retail price: $3.99 per bottle<c- p>&lt;/</c-><c- f>s</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>strong</c-><c- p>&gt;</c->Now selling for just $2.99 a bottle!<c- p>&lt;/</c-><c- f>strong</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>


  <h4 id=the-cite-element><span class=secno>4.5.6</span> The <dfn data-dfn-type=element><code>cite</code></dfn> element<a href=#the-cite-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite title="The <cite> HTML element is used to mark up the title of a cited creative work. The reference may be in an abbreviated form according to context-appropriate conventions related to citation metadata.">Element/cite</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-cite-element:concept-element-categories>Categories</a>:<dd><a id=the-cite-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-cite-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-cite-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-cite-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-cite-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-cite-element:concept-element-content-model>Content model</a>:<dd><a id=the-cite-element:phrasing-content-2-3 href=dom.html#phrasing-content-2>Phrasing content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-cite-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-cite-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-cite-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-cite-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-cite>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-cite>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-cite-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLElement</code>.</dl>

  <p>The <code id=the-cite-element:the-cite-element><a href=#the-cite-element>cite</a></code> element <a id=the-cite-element:represents href=dom.html#represents>represents</a> the title of a work (e.g.
    a book,
    a paper,
    an essay,
    a poem,
    a score,
    a song,
    a script,
    a film,
    a TV show,
    a game,
    a sculpture,
    a painting,
    a theatre production,
    a play,
    an opera,
    a musical,
    an exhibition,
    a legal case report,
    a computer program, 
  etc.). This can be a work that is being quoted or <a id=the-cite-element:referenced href=dom.html#referenced>referenced</a> in detail (i.e., a
  citation), or it can just be a work that is mentioned in passing.</p>

  <p>A person's name is not the title of a work — even if people call that person a piece of
  work — and the element must therefore not be used to mark up people's names. (In some cases,
  the <code id=the-cite-element:the-b-element><a href=#the-b-element>b</a></code> element might be appropriate for names; e.g. in a gossip article where the
  names of famous people are keywords rendered with a different style to draw attention to them. In
  other cases, if an element is <em>really</em> needed, the <code id=the-cite-element:the-span-element><a href=#the-span-element>span</a></code> element can be
  used.)</p>



  <div class=example>

   <p>This next example shows a typical use of the <code id=the-cite-element:the-cite-element-2><a href=#the-cite-element>cite</a></code> element:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->My favorite book is <c- p>&lt;</c-><c- f>cite</c-><c- p>&gt;</c->The Reality Dysfunction<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c-> by
Peter F. Hamilton. My favorite comic is <c- p>&lt;</c-><c- f>cite</c-><c- p>&gt;</c->Pearls Before
Swine<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c-> by Stephan Pastis. My favorite track is <c- p>&lt;</c-><c- f>cite</c-><c- p>&gt;</c->Jive
Samba<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c-> by the Cannonball Adderley Sextet.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>This is correct usage:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->According to the Wikipedia article <c- p>&lt;</c-><c- f>cite</c-><c- p>&gt;</c->HTML<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c->, as it
stood in mid-February 2008, leaving attribute values unquoted is
unsafe. This is obviously an over-simplification.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>The following, however, is incorrect usage, as the <code id=the-cite-element:the-cite-element-3><a href=#the-cite-element>cite</a></code> element here is
   containing far more than the title of the work:</p>

   <pre class=bad><code class='html'><c- c>&lt;!-- do not copy this example, it is an example of bad usage! --&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->According to <c- p>&lt;</c-><c- f>cite</c-><c- p>&gt;</c->the Wikipedia article on HTML<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c->, as it
stood in mid-February 2008, leaving attribute values unquoted is
unsafe. This is obviously an over-simplification.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>The <code id=the-cite-element:the-cite-element-4><a href=#the-cite-element>cite</a></code> element is a key part of any citation in a bibliography, but it is only
   used to mark the title:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>cite</c-><c- p>&gt;</c->Universal Declaration of Human Rights<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c->, United Nations,
December 1948. Adopted by General Assembly resolution 217 A (III).<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>

  <p class=note>A <em>citation</em> is not a <em>quote</em> (for which the <code id=the-cite-element:the-q-element><a href=#the-q-element>q</a></code> element
  is appropriate).</p>

  <div class=example>

   <p>This is incorrect usage, because <code id=the-cite-element:the-cite-element-5><a href=#the-cite-element>cite</a></code> is not for quotes:</p>

   <pre class=bad><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>cite</c-><c- p>&gt;</c->This is wrong!<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c->, said Ian.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>This is also incorrect usage, because a person is not a work:</p>

   <pre class=bad><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>q</c-><c- p>&gt;</c->This is still wrong!<c- p>&lt;/</c-><c- f>q</c-><c- p>&gt;</c->, said <c- p>&lt;</c-><c- f>cite</c-><c- p>&gt;</c->Ian<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c->.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>The correct usage does not use a <code id=the-cite-element:the-cite-element-6><a href=#the-cite-element>cite</a></code> element:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>q</c-><c- p>&gt;</c->This is correct<c- p>&lt;/</c-><c- f>q</c-><c- p>&gt;</c->, said Ian.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>As mentioned above, the <code id=the-cite-element:the-b-element-2><a href=#the-b-element>b</a></code> element might be relevant for marking names as being
   keywords in certain kinds of documents:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->And then <c- p>&lt;</c-><c- f>b</c-><c- p>&gt;</c->Ian<c- p>&lt;/</c-><c- f>b</c-><c- p>&gt;</c-> said <c- p>&lt;</c-><c- f>q</c-><c- p>&gt;</c->this might be right, in a
gossip column, maybe!<c- p>&lt;/</c-><c- f>q</c-><c- p>&gt;</c->.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>



  <h4 id=the-q-element><span class=secno>4.5.7</span> The <dfn data-dfn-type=element><code>q</code></dfn> element<a href=#the-q-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q title="The <q> HTML element indicates that the enclosed text is a short inline quotation. Most modern browsers implement this by surrounding the text in quotation marks. This element is intended for short quotations that don't require paragraph breaks; for long quotations use the <blockquote> element.">Element/q</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-q-element:concept-element-categories>Categories</a>:<dd><a id=the-q-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-q-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-q-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-q-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-q-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-q-element:concept-element-content-model>Content model</a>:<dd><a id=the-q-element:phrasing-content-2-3 href=dom.html#phrasing-content-2>Phrasing content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-q-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-q-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-q-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-q-element:attr-q-cite><a href=#attr-q-cite>cite</a></code> —  Link to the source of the quotation or more information about the edit
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-q-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-q>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-q>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-q-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLQuoteElement</code>.</dl>

  <p>The <code id=the-q-element:the-q-element><a href=#the-q-element>q</a></code> element <a id=the-q-element:represents href=dom.html#represents>represents</a> some <a href=dom.html#phrasing-content-2 id=the-q-element:phrasing-content-2-4>phrasing
  content</a> quoted from another source.</p>

  <p>Quotation punctuation (such as quotation marks) that is quoting the contents of the element
  must not appear immediately before, after, or inside <code id=the-q-element:the-q-element-2><a href=#the-q-element>q</a></code> elements; they will be
  inserted into the rendering by the user agent.</p>

  <p>Content inside a <code id=the-q-element:the-q-element-3><a href=#the-q-element>q</a></code> element must be quoted from another source, whose address, if
  it has one, may be cited in the <dfn data-dfn-for=q id=attr-q-cite data-dfn-type=element-attr><code>cite</code></dfn> attribute. The source may be fictional, as when quoting
  characters in a novel or screenplay.</p>

  <p>If the <code id=the-q-element:attr-q-cite-2><a href=#attr-q-cite>cite</a></code> attribute is present, it must be a <a id=the-q-element:valid-url-potentially-surrounded-by-spaces href=urls-and-fetching.html#valid-url-potentially-surrounded-by-spaces>valid
  URL potentially surrounded by spaces</a>.  User agents may allow users to follow
  such citation links, but they are primarily intended for private use (e.g., by server-side scripts
  collecting statistics about a site's use of quotations), not for readers.</p>

  <p>The <code id=the-q-element:the-q-element-4><a href=#the-q-element>q</a></code> element must not be used in place of quotation marks that do not represent
  quotes; for example, it is inappropriate to use the <code id=the-q-element:the-q-element-5><a href=#the-q-element>q</a></code> element for marking up
  sarcastic statements.</p>

  <p>The use of <code id=the-q-element:the-q-element-6><a href=#the-q-element>q</a></code> elements to mark up quotations is entirely optional; using explicit
  quotation punctuation without <code id=the-q-element:the-q-element-7><a href=#the-q-element>q</a></code> elements is just as correct.</p>

  <div class=example>

   <p>Here is a simple example of the use of the <code id=the-q-element:the-q-element-8><a href=#the-q-element>q</a></code> element:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The man said <c- p>&lt;</c-><c- f>q</c-><c- p>&gt;</c->Things that are impossible just take
longer<c- p>&lt;/</c-><c- f>q</c-><c- p>&gt;</c->. I disagreed with him.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>Here is an example with both an explicit citation link in the <code id=the-q-element:the-q-element-9><a href=#the-q-element>q</a></code> element, and an
   explicit citation outside:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The W3C page <c- p>&lt;</c-><c- f>cite</c-><c- p>&gt;</c->About W3C<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c-> says the W3C&apos;s
mission is <c- p>&lt;</c-><c- f>q</c-> <c- e>cite</c-><c- o>=</c-><c- s>&quot;https://www.w3.org/Consortium/&quot;</c-><c- p>&gt;</c->To lead the
World Wide Web to its full potential by developing protocols and
guidelines that ensure long-term growth for the Web<c- p>&lt;/</c-><c- f>q</c-><c- p>&gt;</c->. I
disagree with this mission.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>In the following example, the quotation itself contains a quotation:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->In <c- p>&lt;</c-><c- f>cite</c-><c- p>&gt;</c->Example One<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c->, he writes <c- p>&lt;</c-><c- f>q</c-><c- p>&gt;</c->The man
said <c- p>&lt;</c-><c- f>q</c-><c- p>&gt;</c->Things that are impossible just take longer<c- p>&lt;/</c-><c- f>q</c-><c- p>&gt;</c->. I
disagreed with him<c- p>&lt;/</c-><c- f>q</c-><c- p>&gt;</c->. Well, I disagree even more!<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>In the following example, quotation marks are used instead of the <code id=the-q-element:the-q-element-10><a href=#the-q-element>q</a></code> element:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->His best argument was ❝I disagree❞, which
I thought was laughable.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>In the following example, there is no quote — the quotation marks are used to name a
   word. Use of the <code id=the-q-element:the-q-element-11><a href=#the-q-element>q</a></code> element in this case would be inappropriate.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The word &quot;ineffable&quot; could have been used to describe the disaster
resulting from the campaign&apos;s mismanagement.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>


  <h4 id=the-dfn-element><span class=secno>4.5.8</span> The <dfn data-dfn-type=element><code>dfn</code></dfn> element<a href=#the-dfn-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dfn title="The <dfn> HTML element is used to indicate the term being defined within the context of a definition phrase or sentence. The ancestor <p> element, the <dt>/<dd> pairing, or the nearest <section> ancestor of the <dfn> element, is considered to be the definition of the term.">Element/dfn</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>15+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-dfn-element:concept-element-categories>Categories</a>:<dd><a id=the-dfn-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-dfn-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-dfn-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-dfn-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-dfn-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-dfn-element:concept-element-content-model>Content model</a>:<dd><a id=the-dfn-element:phrasing-content-2-3 href=dom.html#phrasing-content-2>Phrasing content</a>, but there must be no <code id=the-dfn-element:the-dfn-element><a href=#the-dfn-element>dfn</a></code> element descendants.<dt><a href=dom.html#concept-element-tag-omission id=the-dfn-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-dfn-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-dfn-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd>Also, the <code id=the-dfn-element:attr-dfn-title><a href=#attr-dfn-title>title</a></code> attribute <a href=#attr-dfn-title id=the-dfn-element:attr-dfn-title-2>has special semantics</a> on this element:  Full term or expansion of abbreviation
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-dfn-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-dfn>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-dfn>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-dfn-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLElement</code>.</dl>

  <p>The <code id=the-dfn-element:the-dfn-element-2><a href=#the-dfn-element>dfn</a></code> element <a id=the-dfn-element:represents href=dom.html#represents>represents</a> the defining instance of a term. The <a href=dom.html#paragraph id=the-dfn-element:paragraph>paragraph</a>, <a href=grouping-content.html#the-dl-element id=the-dfn-element:the-dl-element>description list group</a>, or <a href=dom.html#sectioning-content-2 id=the-dfn-element:sectioning-content-2>section</a> that is the nearest ancestor of the <code id=the-dfn-element:the-dfn-element-3><a href=#the-dfn-element>dfn</a></code>
  element must also contain the definition(s) for the <a href=#defining-term id=the-dfn-element:defining-term>term</a> given
  by the <code id=the-dfn-element:the-dfn-element-4><a href=#the-dfn-element>dfn</a></code> element.</p>

  <p><dfn id=defining-term>Defining term</dfn>: if the <code id=the-dfn-element:the-dfn-element-5><a href=#the-dfn-element>dfn</a></code> element has a <dfn data-dfn-for=dfn id=attr-dfn-title data-dfn-type=element-attr><code>title</code></dfn> attribute, then the exact value of that
  attribute is the term being defined. Otherwise, if it contains exactly one element child node and
  no child <code id=the-dfn-element:text><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> nodes, and that child element is an <code id=the-dfn-element:the-abbr-element><a href=#the-abbr-element>abbr</a></code> element with a
  <code id=the-dfn-element:attr-abbr-title><a href=#attr-abbr-title>title</a></code> attribute, then the exact value of <em>that</em>
  attribute is the term being defined. Otherwise, it is the <a id=the-dfn-element:descendant-text-content href=https://dom.spec.whatwg.org/#concept-descendant-text-content data-x-internal=descendant-text-content>descendant text content</a> of
  the <code id=the-dfn-element:the-dfn-element-6><a href=#the-dfn-element>dfn</a></code> element that gives the term being defined.</p>

  

  <p>If the <code id=the-dfn-element:attr-dfn-title-3><a href=#attr-dfn-title>title</a></code> attribute of the <code id=the-dfn-element:the-dfn-element-7><a href=#the-dfn-element>dfn</a></code> element is
  present, then it must contain only the term being defined.</p>

  <p class=note>The <code id=the-dfn-element:attr-title><a href=dom.html#attr-title>title</a></code> attribute of ancestor elements does not
  affect <code id=the-dfn-element:the-dfn-element-8><a href=#the-dfn-element>dfn</a></code> elements.</p>

  <p>An <code id=the-dfn-element:the-a-element><a href=#the-a-element>a</a></code> element that links to a <code id=the-dfn-element:the-dfn-element-9><a href=#the-dfn-element>dfn</a></code> element represents an instance of
  the term defined by the <code id=the-dfn-element:the-dfn-element-10><a href=#the-dfn-element>dfn</a></code> element.</p>

  <div class=example>

   <p>In the following fragment, the term "Garage Door Opener" is first defined in the first
   paragraph, then used in the second. In both cases, its abbreviation is what is actually
   displayed.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The <strong><c- p>&lt;</c-><c- f>dfn</c-><c- p>&gt;&lt;</c-><c- f>abbr</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;Garage Door Opener&quot;</c-><c- p>&gt;</c->GDO<c- p>&lt;/</c-><c- f>abbr</c-><c- p>&gt;&lt;/</c-><c- f>dfn</c-><c- p>&gt;</c-></strong>
is a device that allows off-world teams to open the iris.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- c>&lt;!-- ... later in the document: --&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Teal&apos;c activated his <strong><c- p>&lt;</c-><c- f>abbr</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;Garage Door Opener&quot;</c-><c- p>&gt;</c->GDO<c- p>&lt;/</c-><c- f>abbr</c-><c- p>&gt;</c-></strong>
and so Hammond ordered the iris to be opened.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>With the addition of an <code id=the-dfn-element:the-a-element-2><a href=#the-a-element>a</a></code> element, the <a href=dom.html#referenced id=the-dfn-element:referenced>reference</a>
   can be made explicit:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The <c- p>&lt;</c-><c- f>dfn</c-> <strong><c- e>id</c-><c- o>=</c-><c- s>gdo</c-></strong><c- p>&gt;&lt;</c-><c- f>abbr</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;Garage Door Opener&quot;</c-><c- p>&gt;</c->GDO<c- p>&lt;/</c-><c- f>abbr</c-><c- p>&gt;&lt;/</c-><c- f>dfn</c-><c- p>&gt;</c->
is a device that allows off-world teams to open the iris.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- c>&lt;!-- ... later in the document: --&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Teal&apos;c activated his <strong><c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>#gdo</c-><c- p>&gt;</c-></strong><c- p>&lt;</c-><c- f>abbr</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;Garage Door Opener&quot;</c-><c- p>&gt;</c->GDO<c- p>&lt;/</c-><c- f>abbr</c-><c- p>&gt;</c-><strong><c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-></strong>
and so Hammond ordered the iris to be opened.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>



  <h4 id=the-abbr-element><span class=secno>4.5.9</span> The <dfn data-dfn-type=element><code>abbr</code></dfn> element<a href=#the-abbr-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr title="The <abbr> HTML element represents an abbreviation or acronym.">Element/abbr</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>2+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>7+</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>4+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-abbr-element:concept-element-categories>Categories</a>:<dd><a id=the-abbr-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-abbr-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-abbr-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-abbr-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-abbr-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-abbr-element:concept-element-content-model>Content model</a>:<dd><a id=the-abbr-element:phrasing-content-2-3 href=dom.html#phrasing-content-2>Phrasing content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-abbr-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-abbr-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-abbr-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd>Also, the <code id=the-abbr-element:attr-abbr-title><a href=#attr-abbr-title>title</a></code> attribute <a href=#attr-abbr-title id=the-abbr-element:attr-abbr-title-2>has special semantics</a> on this element:  Full term or expansion of abbreviation
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-abbr-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-abbr>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-abbr>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-abbr-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLElement</code>.</dl>

  <p>The <code id=the-abbr-element:the-abbr-element><a href=#the-abbr-element>abbr</a></code> element <a id=the-abbr-element:represents href=dom.html#represents>represents</a> an abbreviation or acronym, optionally
  with its expansion. The <dfn data-dfn-for=abbr id=attr-abbr-title data-dfn-type=element-attr><code>title</code></dfn> attribute may be used to provide an expansion of the
  abbreviation. The attribute, if specified, must contain an expansion of the abbreviation, and
  nothing else.</p>

  <div class=example>

   <p>The paragraph below contains an abbreviation marked up with the <code id=the-abbr-element:the-abbr-element-2><a href=#the-abbr-element>abbr</a></code> element.
   This paragraph <a href=#defining-term id=the-abbr-element:defining-term>defines the term</a> "Web Hypertext Application
   Technology Working Group".</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The <c- p>&lt;</c-><c- f>dfn</c-> <c- e>id</c-><c- o>=</c-><c- s>whatwg</c-><c- p>&gt;&lt;</c-><c- f>abbr</c->
<c- e>title</c-><c- o>=</c-><c- s>&quot;Web Hypertext Application Technology Working Group&quot;</c-><c- p>&gt;</c->WHATWG<c- p>&lt;/</c-><c- f>abbr</c-><c- p>&gt;&lt;/</c-><c- f>dfn</c-><c- p>&gt;</c->
is a loose unofficial collaboration of web browser manufacturers and
interested parties who wish to develop new technologies designed to
allow authors to write and deploy Applications over the World Wide
Web.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>An alternative way to write this would be:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The <c- p>&lt;</c-><c- f>dfn</c-> <c- e>id</c-><c- o>=</c-><c- s>whatwg</c-><c- p>&gt;</c->Web Hypertext Application Technology
Working Group<c- p>&lt;/</c-><c- f>dfn</c-><c- p>&gt;</c-> (<c- p>&lt;</c-><c- f>abbr</c->
<c- e>title</c-><c- o>=</c-><c- s>&quot;Web Hypertext Application Technology Working Group&quot;</c-><c- p>&gt;</c->WHATWG<c- p>&lt;/</c-><c- f>abbr</c-><c- p>&gt;</c->)
is a loose unofficial collaboration of web browser manufacturers and
interested parties who wish to develop new technologies designed to
allow authors to write and deploy Applications over the World Wide
Web.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>This paragraph has two abbreviations. Notice how only one is defined; the other, with no
   expansion associated with it, does not use the <code id=the-abbr-element:the-abbr-element-3><a href=#the-abbr-element>abbr</a></code> element.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The
<c- p>&lt;</c-><c- f>abbr</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;Web Hypertext Application Technology Working Group&quot;</c-><c- p>&gt;</c->WHATWG<c- p>&lt;/</c-><c- f>abbr</c-><c- p>&gt;</c->
started working on HTML5 in 2004.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>This paragraph links an abbreviation to its definition.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;#whatwg&quot;</c-><c- p>&gt;&lt;</c-><c- f>abbr</c->
<c- e>title</c-><c- o>=</c-><c- s>&quot;Web Hypertext Application Technology Working Group&quot;</c-><c- p>&gt;</c->WHATWG<c- p>&lt;/</c-><c- f>abbr</c-><c- p>&gt;&lt;/</c-><c- f>a</c-><c- p>&gt;</c->
community does not have much representation from Asia.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>This paragraph marks up an abbreviation without giving an expansion, possibly as a hook to
   apply styles for abbreviations (e.g. smallcaps).</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Philip` and Dashiva both denied that they were going to
get the issue counts from past revisions of the specification to
backfill the <c- p>&lt;</c-><c- f>abbr</c-><c- p>&gt;</c->WHATWG<c- p>&lt;/</c-><c- f>abbr</c-><c- p>&gt;</c-> issue graph.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>

  <p>If an abbreviation is pluralized, the expansion's grammatical number (plural vs singular) must
  match the grammatical number of the contents of the element.</p>

  <div class=example>

   <p>Here the plural is outside the element, so the expansion is in the singular:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Two <c- p>&lt;</c-><c- f>abbr</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;Working Group&quot;</c-><c- p>&gt;</c->WG<c- p>&lt;/</c-><c- f>abbr</c-><c- p>&gt;</c->s worked on
this specification: the <c- p>&lt;</c-><c- f>abbr</c-><c- p>&gt;</c->WHATWG<c- p>&lt;/</c-><c- f>abbr</c-><c- p>&gt;</c-> and the
<c- p>&lt;</c-><c- f>abbr</c-><c- p>&gt;</c->HTMLWG<c- p>&lt;/</c-><c- f>abbr</c-><c- p>&gt;</c->.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>Here the plural is inside the element, so the expansion is in the plural:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Two <c- p>&lt;</c-><c- f>abbr</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;Working Groups&quot;</c-><c- p>&gt;</c->WGs<c- p>&lt;/</c-><c- f>abbr</c-><c- p>&gt;</c-> worked on
this specification: the <c- p>&lt;</c-><c- f>abbr</c-><c- p>&gt;</c->WHATWG<c- p>&lt;/</c-><c- f>abbr</c-><c- p>&gt;</c-> and the
<c- p>&lt;</c-><c- f>abbr</c-><c- p>&gt;</c->HTMLWG<c- p>&lt;/</c-><c- f>abbr</c-><c- p>&gt;</c->.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>

  <p>Abbreviations do not have to be marked up using this element. It is expected to be useful in
  the following cases:</p>

  <ul><li>Abbreviations for which the author wants to give expansions, where using the
   <code id=the-abbr-element:the-abbr-element-4><a href=#the-abbr-element>abbr</a></code> element with a <code id=the-abbr-element:attr-title><a href=dom.html#attr-title>title</a></code> attribute is an
   alternative to including the expansion inline (e.g. in parentheses).<li>Abbreviations that are likely to be unfamiliar to the document's readers, for which authors
   are encouraged to either mark up the abbreviation using an <code id=the-abbr-element:the-abbr-element-5><a href=#the-abbr-element>abbr</a></code> element with a <code id=the-abbr-element:attr-title-2><a href=dom.html#attr-title>title</a></code> attribute or include the expansion inline in the text the first
   time the abbreviation is used.<li>Abbreviations whose presence needs to be semantically annotated, e.g. so that they can be
   identified from a style sheet and given specific styles, for which the <code id=the-abbr-element:the-abbr-element-6><a href=#the-abbr-element>abbr</a></code> element
   can be used without a <code id=the-abbr-element:attr-title-3><a href=dom.html#attr-title>title</a></code> attribute.</ul>

  <p class=note>Providing an expansion in a <code id=the-abbr-element:attr-title-4><a href=dom.html#attr-title>title</a></code> attribute once
  will not necessarily cause other <code id=the-abbr-element:the-abbr-element-7><a href=#the-abbr-element>abbr</a></code> elements in the same document with the same
  contents but without a <code id=the-abbr-element:attr-title-5><a href=dom.html#attr-title>title</a></code> attribute to behave as if they had
  the same expansion. Every <code id=the-abbr-element:the-abbr-element-8><a href=#the-abbr-element>abbr</a></code> element is independent.</p>


  <h4 id=the-ruby-element><span class=secno>4.5.10</span> The <dfn data-dfn-type=element><code>ruby</code></dfn> element<a href=#the-ruby-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby title="The <ruby> HTML element represents small annotations that are rendered above, below, or next to base text, usually used for showing the pronunciation of East Asian characters. It can also be used for annotating other kinds of text, but this usage is less common.">Element/ruby</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>38+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>5+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-ruby-element:concept-element-categories>Categories</a>:<dd><a id=the-ruby-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-ruby-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-ruby-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-ruby-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-ruby-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-ruby-element:concept-element-content-model>Content model</a>:<dd>See prose.<dt><a href=dom.html#concept-element-tag-omission id=the-ruby-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-ruby-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-ruby-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-ruby-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-ruby>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-ruby>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-ruby-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLElement</code>.</dl>

  <p>The <code id=the-ruby-element:the-ruby-element><a href=#the-ruby-element>ruby</a></code> element allows one or more spans of phrasing content to be marked with
  ruby annotations. Ruby annotations are short runs of text presented alongside base text, primarily
  used in East Asian typography as a guide for pronunciation or to include other annotations. In
  Japanese, this form of typography is also known as <i>furigana</i>.</p>

  <p>The content model of <code id=the-ruby-element:the-ruby-element-2><a href=#the-ruby-element>ruby</a></code> elements consists of one or more of the following
  sequences:</p>

  <ol><li>
    <p>One or the other of the following:</p>

    <ul><li><p><a id=the-ruby-element:phrasing-content-2-3 href=dom.html#phrasing-content-2>Phrasing content</a>, but with no <code id=the-ruby-element:the-ruby-element-3><a href=#the-ruby-element>ruby</a></code> elements and with no
     <code id=the-ruby-element:the-ruby-element-4><a href=#the-ruby-element>ruby</a></code> element descendants<li><p>A single <code id=the-ruby-element:the-ruby-element-5><a href=#the-ruby-element>ruby</a></code> element that itself has no <code id=the-ruby-element:the-ruby-element-6><a href=#the-ruby-element>ruby</a></code> element
     descendants</ul>
   <li>
    <p>One or the other of the following:</p>

    <ul><li><p>One or more <code id=the-ruby-element:the-rt-element><a href=#the-rt-element>rt</a></code> elements</p>

     <li><p>An <code id=the-ruby-element:the-rp-element><a href=#the-rp-element>rp</a></code> element followed by one or more <code id=the-ruby-element:the-rt-element-2><a href=#the-rt-element>rt</a></code> elements, each of
     which is itself followed by an <code id=the-ruby-element:the-rp-element-2><a href=#the-rp-element>rp</a></code> element</ul>
  </ol>

  

  <p>The <code id=the-ruby-element:the-ruby-element-7><a href=#the-ruby-element>ruby</a></code> and <code id=the-ruby-element:the-rt-element-3><a href=#the-rt-element>rt</a></code> elements can be used for a variety of kinds of
  annotations, including in particular (though by no means limited to) those described below. For
  more details on Japanese Ruby in particular, and how to render Ruby for Japanese, see
  <cite>Requirements for Japanese Text Layout</cite>. <a href=references.html#refsJLREQ>[JLREQ]</a></p>

  <p class=note>At the time of writing, CSS does not yet provide a way to fully control the
  rendering of the HTML <code id=the-ruby-element:the-ruby-element-8><a href=#the-ruby-element>ruby</a></code> element. It is hoped that CSS will be extended to support
  the styles described below in due course.</p>

  

  <dl><dt>Mono-ruby for individual base characters in Japanese

   <dd>
    <p>One or more hiragana or katakana characters (the ruby annotation) are placed with each
    ideographic character (the base text). This is used to provide readings of kanji characters.

    <div class=example> 
     <pre><code class='html'><c- p>&lt;</c-><c- f>ruby</c-><c- p>&gt;</c->B<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->annotation<c- p>&lt;/</c-><c- f>ruby</c-><c- p>&gt;</c-></code></pre>
    </div>

    <div class=example>
     <p>In this example, notice how each annotation corresponds to a single base character.
     <pre><code class='html'><c- p>&lt;</c-><c- f>ruby</c-><c- p>&gt;</c->君<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->くん<c- p>&lt;/</c-><c- f>ruby</c-><c- p>&gt;&lt;</c-><c- f>ruby</c-><c- p>&gt;</c->子<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->し<c- p>&lt;/</c-><c- f>ruby</c-><c- p>&gt;</c->は<c- p>&lt;</c-><c- f>ruby</c-><c- p>&gt;</c->和<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->わ<c- p>&lt;/</c-><c- f>ruby</c-><c- p>&gt;</c->して<c- p>&lt;</c-><c- f>ruby</c-><c- p>&gt;</c->同<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->どう<c- p>&lt;/</c-><c- f>ruby</c-><c- p>&gt;</c->ぜず。</code></pre>
     <p lang=ja><ruby>君<rt>くん</ruby><ruby>子<rt>し</ruby>は<ruby>和<rt>わ</ruby>して<ruby>同<rt>どう</ruby>ぜず。
     <p>This example can also be written as follows, using one <code id=the-ruby-element:the-ruby-element-9><a href=#the-ruby-element>ruby</a></code> element with two
     segments of base text and two annotations (one for each) rather than two back-to-back
     <code id=the-ruby-element:the-ruby-element-10><a href=#the-ruby-element>ruby</a></code> elements each with one base text segment and annotation (as in the markup
     above):
     <pre><code class='html'><c- p>&lt;</c-><c- f>ruby</c-><c- p>&gt;</c->君<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->くん<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;</c->子<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->し<c- p>&lt;/</c-><c- f>ruby</c-><c- p>&gt;</c->は<c- p>&lt;</c-><c- f>ruby</c-><c- p>&gt;</c->和<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->わ<c- p>&lt;/</c-><c- f>ruby</c-><c- p>&gt;</c->して<c- p>&lt;</c-><c- f>ruby</c-><c- p>&gt;</c->同<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->どう<c- p>&lt;/</c-><c- f>ruby</c-><c- p>&gt;</c->ぜず。</code></pre>
    </div>
   <dt>Mono-ruby for compound words (jukugo)

   <dd>
    <p>This is similar to the previous case: each ideographic character in the compound word (the
    base text) has its reading given in hiragana or katakana characters (the ruby annotation). The
    difference is that the base text segments form a compound word rather than being separate from
    each other.

    <div class=example> 
     <pre><code class='html'><c- p>&lt;</c-><c- f>ruby</c-><c- p>&gt;</c->B<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->annotation<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;</c->B<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->annotation<c- p>&lt;/</c-><c- f>ruby</c-><c- p>&gt;</c-></code></pre>
    </div>

    <div class=example>
     <p>In this example, notice again how each annotation corresponds to a single base character. In this example, each compound word (jukugo) corresponds to a single <code id=the-ruby-element:the-ruby-element-11><a href=#the-ruby-element>ruby</a></code> element.</p>
     <p>The rendering here is expected to be that each annotation be placed over (or next to, in vertical text) the corresponding base character, with the annotations not overhanging any of the adjacent characters.</p>
     <pre><code class='html'><c- p>&lt;</c-><c- f>ruby</c-><c- p>&gt;</c->鬼<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->き<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;</c->門<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->もん<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;&lt;/</c-><c- f>ruby</c-><c- p>&gt;</c->の<c- p>&lt;</c-><c- f>ruby</c-><c- p>&gt;</c->方<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->ほう<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;</c->角<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->がく<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;&lt;/</c-><c- f>ruby</c-><c- p>&gt;</c->を<c- p>&lt;</c-><c- f>ruby</c-><c- p>&gt;</c->凝<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->ぎょう<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;</c->視<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->し<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;&lt;/</c-><c- f>ruby</c-><c- p>&gt;</c->する</code></pre>
     <p lang=ja><ruby>鬼<rt>き</rt>門<rt>もん</ruby>の<ruby>方<rt>ほう</rt>角<rt>がく</ruby>を<ruby>凝<rt>ぎょう</rt>視<rt>し</ruby>する

    </div>
   <dt>Jukugo-ruby

   <dd>
    <p>This is semantically identical to the previous case (each individual ideographic character in
    the base compound word has its reading given in an annotation in hiragana or katakana
    characters), but the rendering is the more complicated Jukugo Ruby rendering.

    <div class=example>
     <p>This is the same example as above for mono-ruby for compound words. The different rendering is expected to be achieved using different styling (e.g. in CSS), and is not shown here.</p>
     <pre><code class='html'><c- p>&lt;</c-><c- f>ruby</c-><c- p>&gt;</c->鬼<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->き<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;</c->門<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->もん<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;&lt;/</c-><c- f>ruby</c-><c- p>&gt;</c->の<c- p>&lt;</c-><c- f>ruby</c-><c- p>&gt;</c->方<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->ほう<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;</c->角<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->がく<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;&lt;/</c-><c- f>ruby</c-><c- p>&gt;</c->を<c- p>&lt;</c-><c- f>ruby</c-><c- p>&gt;</c->凝<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->ぎょう<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;</c->視<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->し<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;&lt;/</c-><c- f>ruby</c-><c- p>&gt;</c->する</code></pre>
     
     
    </div>

    <p class=note>For more details on <a href=https://www.w3.org/TR/jlreq/#positioning_of_jukugoruby>Jukugo Ruby rendering</a>, see
    Appendix F in the <cite>Requirements for Japanese Text Layout</cite>. <a href=references.html#refsJLREQ>[JLREQ]</a></p>
   <dt>Group ruby for describing meanings

   <dd>
    <p>The annotation describes the meaning of the base text, rather than (or in addition to) the
    pronunciation. As such, both the base text and the annotation can be multiple characters long.

    <div class=example> <pre><code class='html'><c- p>&lt;</c-><c- f>ruby</c-><c- p>&gt;</c->BASE<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->annotation<c- p>&lt;/</c-><c- f>ruby</c-><c- p>&gt;</c-></code></pre> </div>

    <div class=example>
     <p>Here a compound ideographic word has its corresponding katakana given as an annotation.
     <pre><code class='html'><c- p>&lt;</c-><c- f>ruby</c-><c- p>&gt;</c->境界面<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->インターフェース<c- p>&lt;/</c-><c- f>ruby</c-><c- p>&gt;</c-></code></pre>
     <p lang=ja><ruby>境界面<rt>インターフェース</ruby>
    </div>

    <div class=example>
     <p>Here a compound ideographic word has its translation in English provided as an annotation.
     <pre><code class='html'><c- p>&lt;</c-><c- f>ruby</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;ja&quot;</c-><c- p>&gt;</c->編集者<c- p>&lt;</c-><c- f>rt</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en&quot;</c-><c- p>&gt;</c->editor<c- p>&lt;/</c-><c- f>ruby</c-><c- p>&gt;</c-></code></pre>
     <p><ruby lang=ja>編集者<rt lang=en>editor</ruby>
    </div>
   <dt>Group ruby for Jukuji readings

   <dd>
    <p>A phonetic reading that corresponds to multiple base characters, because a one-to-one mapping
    would be difficult. (In English, the words "Colonel" and "Lieutenant" are examples of words
    where a direct mapping of pronunciation to individual letters is, in some dialects, rather
    unclear.)

    <div class=example>
     <p>In this example, the name of a species of flowers has a phonetic reading provided using group ruby:
     <pre><code class='html'><c- p>&lt;</c-><c- f>ruby</c-><c- p>&gt;</c->紫陽花<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->あじさい<c- p>&lt;/</c-><c- f>ruby</c-><c- p>&gt;</c-></code></pre>
     <p lang=ja><ruby>紫陽花<rt>あじさい</ruby>
    </div>
   <dt>Text with both phonetic and semantic annotations (double-sided ruby)

   <dd>
    <p>Sometimes, ruby styles described above are combined.

    <p>If this results in two annotations covering the same single base segment, then the
    annotations can just be placed back to back.

    <div class=example>
     <pre><code class='html'><c- p>&lt;</c-><c- f>ruby</c-><c- p>&gt;</c->BASE<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->annotation 1<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->annotation 2<c- p>&lt;/</c-><c- f>ruby</c-><c- p>&gt;</c-></code></pre>
    </div>

    <div class=example>
     <pre><code class='html'><c- p>&lt;</c-><c- f>ruby</c-><c- p>&gt;</c->B<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->a<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->a<c- p>&lt;/</c-><c- f>ruby</c-><c- p>&gt;&lt;</c-><c- f>ruby</c-><c- p>&gt;</c->A<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->a<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->a<c- p>&lt;/</c-><c- f>ruby</c-><c- p>&gt;&lt;</c-><c- f>ruby</c-><c- p>&gt;</c->S<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->a<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->a<c- p>&lt;/</c-><c- f>ruby</c-><c- p>&gt;&lt;</c-><c- f>ruby</c-><c- p>&gt;</c->E<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->a<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->a<c- p>&lt;/</c-><c- f>ruby</c-><c- p>&gt;</c-></code></pre>
    </div>

    <div class=example>

     <p>In this contrived example, some symbols are given names in English and French.

     <pre><code class='html'><c- p>&lt;</c-><c- f>ruby</c-><c- p>&gt;</c->
 ♥ <c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c-> Heart <c- p>&lt;</c-><c- f>rt</c-> <c- e>lang</c-><c- o>=</c-><c- s>fr</c-><c- p>&gt;</c-> Cœur <c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;</c->
 ☘ <c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c-> Shamrock <c- p>&lt;</c-><c- f>rt</c-> <c- e>lang</c-><c- o>=</c-><c- s>fr</c-><c- p>&gt;</c-> Trèfle <c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;</c->
 ✶ <c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c-> Star <c- p>&lt;</c-><c- f>rt</c-> <c- e>lang</c-><c- o>=</c-><c- s>fr</c-><c- p>&gt;</c-> Étoile <c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>ruby</c-><c- p>&gt;</c-></code></pre>

    </div>

    <p>In more complicated situations such as the following examples, a nested <code id=the-ruby-element:the-ruby-element-12><a href=#the-ruby-element>ruby</a></code>
    element is used to give the inner annotations, and then that whole <code id=the-ruby-element:the-ruby-element-13><a href=#the-ruby-element>ruby</a></code> is then
    given an annotation at the "outer" level.

    <div class=example>
     <pre><code class='html'><c- p>&lt;</c-><c- f>ruby</c-><c- p>&gt;&lt;</c-><c- f>ruby</c-><c- p>&gt;</c->B<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->a<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;</c->A<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->n<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;</c->S<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->t<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;</c->E<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->n<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;&lt;/</c-><c- f>ruby</c-><c- p>&gt;&lt;</c-><c- f>rt</c-><c- p>&gt;</c->annotation<c- p>&lt;/</c-><c- f>ruby</c-><c- p>&gt;</c-></code></pre>
    </div>

    <div class=example>
     <p>Here both a phonetic reading and the meaning are given in ruby annotations. The annotation on the nested <code id=the-ruby-element:the-ruby-element-14><a href=#the-ruby-element>ruby</a></code> element gives a mono-ruby phonetic annotation for each base character, while the annotation in the <code id=the-ruby-element:the-rt-element-4><a href=#the-rt-element>rt</a></code> element that is a child of the outer <code id=the-ruby-element:the-ruby-element-15><a href=#the-ruby-element>ruby</a></code> element gives the meaning using hiragana.
     <pre><code class='html'><c- p>&lt;</c-><c- f>ruby</c-><c- p>&gt;&lt;</c-><c- f>ruby</c-><c- p>&gt;</c->東<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->とう<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;</c->南<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->なん<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;&lt;/</c-><c- f>ruby</c-><c- p>&gt;&lt;</c-><c- f>rt</c-><c- p>&gt;</c->たつみ<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;&lt;/</c-><c- f>ruby</c-><c- p>&gt;</c->の方角</code></pre>
     <p lang=ja><ruby><ruby>東<rt>とう</rt>南<rt>なん</ruby><rt>たつみ</ruby>の方角
    </div>

    <div class=example>
     <p>This is the same example, but the meaning is given in English instead of Japanese:
     <pre><code class='html'><c- p>&lt;</c-><c- f>ruby</c-><c- p>&gt;&lt;</c-><c- f>ruby</c-><c- p>&gt;</c->東<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->とう<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;</c->南<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->なん<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;&lt;/</c-><c- f>ruby</c-><c- p>&gt;&lt;</c-><c- f>rt</c-> <c- e>lang</c-><c- o>=</c-><c- s>en</c-><c- p>&gt;</c->Southeast<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;&lt;/</c-><c- f>ruby</c-><c- p>&gt;</c->の方角</code></pre>
     <p lang=ja><ruby><ruby>東<rt>とう</rt>南<rt>なん</ruby><rt lang=en>Southeast</ruby>の方角
    </div>
   </dl>

  <hr>

  <p>Within a <code id=the-ruby-element:the-ruby-element-16><a href=#the-ruby-element>ruby</a></code> element that does not have a <code id=the-ruby-element:the-ruby-element-17><a href=#the-ruby-element>ruby</a></code> element ancestor,
  content is segmented and segments are placed into three categories: base text segments, annotation
  segments, and ignored segments. Ignored segments do not form part of the document's semantics
  (they consist of some <a id=the-ruby-element:inter-element-whitespace href=dom.html#inter-element-whitespace>inter-element whitespace</a> and <code id=the-ruby-element:the-rp-element-3><a href=#the-rp-element>rp</a></code> elements, the
  latter of which are used for legacy user agents that do not support ruby at all). Base text
  segments can overlap (with a limit of two segments overlapping any one position in the DOM, and
  with any segment having an earlier start point than an overlapping segment also having an equal or
  later end point, and any segment have a later end point than an overlapping segment also having an
  equal or earlier start point). Annotation segments correspond to <code id=the-ruby-element:the-rt-element-5><a href=#the-rt-element>rt</a></code> elements. Each annotation
  segment can be associated with a base text segment, and each base text segment can have annotation
  segments associated with it. (In a conforming document, each base text segment is associated with
  at least one annotation segment, and each annotation segment is associated with one base text
  segment.) A <code id=the-ruby-element:the-ruby-element-18><a href=#the-ruby-element>ruby</a></code> element <a id=the-ruby-element:represents href=dom.html#represents>represents</a> the union of the segments of base
  text it contains, along with the mapping from those base text segments to annotation segments.
  </p>

  

  <div class=example>

   
   

   <p>In this example, each ideograph in the Japanese text <span lang=ja>漢字</span> is annotated with its reading in hiragana.</p>

   <pre lang=ja><code class='html'>...
<c- p>&lt;</c-><c- f>ruby</c-><c- p>&gt;</c->漢<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->かん<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;</c->字<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->じ<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;&lt;/</c-><c- f>ruby</c-><c- p>&gt;</c->
...</code></pre>

   <p>This might be rendered as:</p>

   <p><img alt="The two main ideographs, each with its annotation in hiragana rendered in a smaller font above it." src=../images/sample-ruby-ja.png width=171 height=78></p>

  </div>

  <div class=example>

   

   <p>In this example, each ideograph in the traditional Chinese text <span lang=zh-TW>漢字</span> is annotated with its bopomofo reading.</p>

   <pre lang=zh-TW><code class='html'><c- p>&lt;</c-><c- f>ruby</c-><c- p>&gt;</c->漢<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->ㄏㄢˋ<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;</c->字<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->ㄗˋ<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;&lt;/</c-><c- f>ruby</c-><c- p>&gt;</c-></code></pre>

   <p>This might be rendered as:</p>

   <p><img alt="The two main ideographs, each with its bopomofo annotation rendered in a smaller font next to it." src=../images/sample-ruby-bopomofo.png width=78 height=100></p>

  </div>

  <div class=example>

   

   <p>In this example, each ideograph in the simplified Chinese text <span lang=zh-CN>汉字</span> is annotated with its pinyin reading.</p>

   <pre lang=zh-CN><code class='html'>...<c- p>&lt;</c-><c- f>ruby</c-><c- p>&gt;</c->汉<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->hàn<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;</c->字<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->zì<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;&lt;/</c-><c- f>ruby</c-><c- p>&gt;</c->...</code></pre>

   <p>This might be rendered as:</p>

   <p><img alt="The two main ideographs, each with its pinyin annotation rendered in a smaller font above it." src=../images/sample-ruby-pinyin.png width=173 height=79></p>

  </div>

  

  <div class=example>

   <p>In this more contrived example, the acronym "HTML" has four annotations: one for the whole
   acronym, briefly describing what it is, one for the letters "HT" expanding them to "Hypertext",
   one for the letter "M" expanding it to "Markup", and one for the letter "L" expanding it to
   "Language".</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>ruby</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>ruby</c-><c- p>&gt;</c->HT<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->Hypertext<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;</c->M<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->Markup<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;</c->L<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->Language<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;&lt;/</c-><c- f>ruby</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->An abstract language for describing documents and applications
<c- p>&lt;/</c-><c- f>ruby</c-><c- p>&gt;</c-></code></pre>

  </div>


  <h4 id=the-rt-element><span class=secno>4.5.11</span> The <dfn data-dfn-type=element><code>rt</code></dfn> element<a href=#the-rt-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rt title="The <rt> HTML element specifies the ruby text component of a ruby annotation, which is used to provide pronunciation, translation, or transliteration information for East Asian typography. The <rt> element must always be contained within a <ruby> element.">Element/rt</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>38+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>5+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie yes"><span>Internet Explorer</span><span>5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-rt-element:concept-element-categories>Categories</a>:<dd>None.<dt><a href=dom.html#concept-element-contexts id=the-rt-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>As a child of a <code id=the-rt-element:the-ruby-element><a href=#the-ruby-element>ruby</a></code> element.<dt><a href=dom.html#concept-element-content-model id=the-rt-element:concept-element-content-model>Content model</a>:<dd><a id=the-rt-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-rt-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>An <code id=the-rt-element:the-rt-element><a href=#the-rt-element>rt</a></code> element's <a href=syntax.html#syntax-end-tag id=the-rt-element:syntax-end-tag>end tag</a> can be omitted if the
  <code id=the-rt-element:the-rt-element-2><a href=#the-rt-element>rt</a></code> element is immediately followed by an <code id=the-rt-element:the-rt-element-3><a href=#the-rt-element>rt</a></code> or <code id=the-rt-element:the-rp-element><a href=#the-rp-element>rp</a></code> element,
  or if there is no more content in the parent element.<dt><a href=dom.html#concept-element-attributes id=the-rt-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-rt-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-rt-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-rt>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-rt>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-rt-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLElement</code>.</dl>

  <p>The <code id=the-rt-element:the-rt-element-4><a href=#the-rt-element>rt</a></code> element marks the ruby text component of a ruby annotation. When it is the
  child of a <code id=the-rt-element:the-ruby-element-2><a href=#the-ruby-element>ruby</a></code> element, it doesn't <a href=dom.html#represents id=the-rt-element:represents>represent</a>
  anything itself, but the <code id=the-rt-element:the-ruby-element-3><a href=#the-ruby-element>ruby</a></code> element uses it as part of determining what <em>it</em>
  <a id=the-rt-element:represents-2 href=dom.html#represents>represents</a>.</p>

  


  <h4 id=the-rp-element><span class=secno>4.5.12</span> The <dfn data-dfn-type=element><code>rp</code></dfn> element<a href=#the-rp-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rp title="The <rp> HTML element is used to provide fall-back parentheses for browsers that do not support display of ruby annotations using the <ruby> element. One <rp> element should enclose each of the opening and closing parentheses that wrap the <rt> element that contains the annotation's text.">Element/rp</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>38+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>5+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie yes"><span>Internet Explorer</span><span>5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-rp-element:concept-element-categories>Categories</a>:<dd>None.<dt><a href=dom.html#concept-element-contexts id=the-rp-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>As a child of a <code id=the-rp-element:the-ruby-element><a href=#the-ruby-element>ruby</a></code> element, either immediately before or immediately after an <code id=the-rp-element:the-rt-element><a href=#the-rt-element>rt</a></code> element.<dt><a href=dom.html#concept-element-content-model id=the-rp-element:concept-element-content-model>Content model</a>:<dd><a href=dom.html#text-content id=the-rp-element:text-content>Text</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-rp-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>An <code id=the-rp-element:the-rp-element><a href=#the-rp-element>rp</a></code> element's <a href=syntax.html#syntax-end-tag id=the-rp-element:syntax-end-tag>end tag</a> can be omitted if the
  <code id=the-rp-element:the-rp-element-2><a href=#the-rp-element>rp</a></code> element is immediately followed by an <code id=the-rp-element:the-rt-element-2><a href=#the-rt-element>rt</a></code> or <code id=the-rp-element:the-rp-element-3><a href=#the-rp-element>rp</a></code> element,
  or if there is no more content in the parent element.<dt><a href=dom.html#concept-element-attributes id=the-rp-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-rp-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-rp-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-rp>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-rp>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-rp-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLElement</code>.</dl>

  <p>The <code id=the-rp-element:the-rp-element-4><a href=#the-rp-element>rp</a></code> element can be used to provide parentheses or other content around a ruby
  text component of a ruby annotation, to be shown by user agents that don't support ruby
  annotations.</p>

  <p>An <code id=the-rp-element:the-rp-element-5><a href=#the-rp-element>rp</a></code> element  <a id=the-rp-element:represents href=dom.html#represents>represents</a> nothing. </p>

  <div class=example>

   <p>The example above, in which each ideograph in the text <span lang=ja>漢字</span> is annotated with its phonetic reading, could be expanded to
   use <code id=the-rp-element:the-rp-element-6><a href=#the-rp-element>rp</a></code> so that in legacy user agents the readings are in parentheses:</p>

   <pre lang=ja><code class='html'>...
<c- p>&lt;</c-><c- f>ruby</c-><c- p>&gt;</c->漢<c- p>&lt;</c-><c- f>rp</c-><c- p>&gt;</c->（<c- p>&lt;/</c-><c- f>rp</c-><c- p>&gt;&lt;</c-><c- f>rt</c-><c- p>&gt;</c->かん<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;&lt;</c-><c- f>rp</c-><c- p>&gt;</c->）<c- p>&lt;/</c-><c- f>rp</c-><c- p>&gt;</c->字<c- p>&lt;</c-><c- f>rp</c-><c- p>&gt;</c->（<c- p>&lt;/</c-><c- f>rp</c-><c- p>&gt;&lt;</c-><c- f>rt</c-><c- p>&gt;</c->じ<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;&lt;</c-><c- f>rp</c-><c- p>&gt;</c->）<c- p>&lt;/</c-><c- f>rp</c-><c- p>&gt;&lt;/</c-><c- f>ruby</c-><c- p>&gt;</c->
...</code></pre>

   <p>In conforming user agents the rendering would be as above, but in user agents that do not
   support ruby, the rendering would be:</p>

   <pre lang=ja>... 漢（かん）字（じ）...</pre>

  </div>

  <div class=example>

   <p>When there are multiple annotations for a segment, <code id=the-rp-element:the-rp-element-7><a href=#the-rp-element>rp</a></code> elements can also be placed
   between the annotations. Here is another copy of an earlier contrived example showing some
   symbols with names given in English and French, but this time with <code id=the-rp-element:the-rp-element-8><a href=#the-rp-element>rp</a></code> elements as
   well:

   <pre><code class='html'><c- p>&lt;</c-><c- f>ruby</c-><c- p>&gt;</c->
♥<c- p>&lt;</c-><c- f>rp</c-><c- p>&gt;</c->: <c- p>&lt;/</c-><c- f>rp</c-><c- p>&gt;&lt;</c-><c- f>rt</c-><c- p>&gt;</c->Heart<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;&lt;</c-><c- f>rp</c-><c- p>&gt;</c->, <c- p>&lt;/</c-><c- f>rp</c-><c- p>&gt;&lt;</c-><c- f>rt</c-> <c- e>lang</c-><c- o>=</c-><c- s>fr</c-><c- p>&gt;</c->Cœur<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;&lt;</c-><c- f>rp</c-><c- p>&gt;</c->.<c- p>&lt;/</c-><c- f>rp</c-><c- p>&gt;</c->
☘<c- p>&lt;</c-><c- f>rp</c-><c- p>&gt;</c->: <c- p>&lt;/</c-><c- f>rp</c-><c- p>&gt;&lt;</c-><c- f>rt</c-><c- p>&gt;</c->Shamrock<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;&lt;</c-><c- f>rp</c-><c- p>&gt;</c->, <c- p>&lt;/</c-><c- f>rp</c-><c- p>&gt;&lt;</c-><c- f>rt</c-> <c- e>lang</c-><c- o>=</c-><c- s>fr</c-><c- p>&gt;</c->Trèfle<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;&lt;</c-><c- f>rp</c-><c- p>&gt;</c->.<c- p>&lt;/</c-><c- f>rp</c-><c- p>&gt;</c->
✶<c- p>&lt;</c-><c- f>rp</c-><c- p>&gt;</c->: <c- p>&lt;/</c-><c- f>rp</c-><c- p>&gt;&lt;</c-><c- f>rt</c-><c- p>&gt;</c->Star<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;&lt;</c-><c- f>rp</c-><c- p>&gt;</c->, <c- p>&lt;/</c-><c- f>rp</c-><c- p>&gt;&lt;</c-><c- f>rt</c-> <c- e>lang</c-><c- o>=</c-><c- s>fr</c-><c- p>&gt;</c->Étoile<c- p>&lt;/</c-><c- f>rt</c-><c- p>&gt;&lt;</c-><c- f>rp</c-><c- p>&gt;</c->.<c- p>&lt;/</c-><c- f>rp</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>ruby</c-><c- p>&gt;</c-></code></pre>

   <p>This would make the example render as follows in non-ruby-capable user agents:

   <pre>♥: Heart, <span lang=fr>Cœur</span>. ☘: Shamrock, <span lang=fr>Trèfle</span>. ✶: Star, <span lang=fr>Étoile</span>.</pre>

  </div>


  <h4 id=the-data-element><span class=secno>4.5.13</span> The <dfn data-dfn-type=element><code>data</code></dfn> element<a href=#the-data-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/data title="The <data> HTML element links a given piece of content with a machine-readable translation. If the content is time- or date-related, the <time> element must be used.">Element/data</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>22+</span></span><span class="safari yes"><span>Safari</span><span>10+</span></span><span class="chrome yes"><span>Chrome</span><span>62+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>18</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-data-element:concept-element-categories>Categories</a>:<dd><a id=the-data-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-data-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-data-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-data-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-data-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-data-element:concept-element-content-model>Content model</a>:<dd><a id=the-data-element:phrasing-content-2-3 href=dom.html#phrasing-content-2>Phrasing content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-data-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-data-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-data-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-data-element:attr-data-value><a href=#attr-data-value>value</a></code> —  Machine-readable value
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-data-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-data>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-data>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-data-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLDataElement</code>.</dl>

  <p>The <code id=the-data-element:the-data-element><a href=#the-data-element>data</a></code> element <a id=the-data-element:represents href=dom.html#represents>represents</a> its contents, along with a
  machine-readable form of those contents in the <code id=the-data-element:attr-data-value-2><a href=#attr-data-value>value</a></code>
  attribute.</p>

  <p>The <dfn data-dfn-for=data id=attr-data-value data-dfn-type=element-attr><code>value</code></dfn> attribute
  must be present. Its value must be a representation of the element's contents in a
  machine-readable format.</p>

  <p class=note>When the value is date- or time-related, the more specific <code id=the-data-element:the-time-element><a href=#the-time-element>time</a></code>
  element can be used instead.</p>

  <p>The element can be used for several purposes.</p>

  <p>When combined with microformats or the <a href=microdata.html#microdata>microdata attributes</a> defined in
  this specification, the element serves to provide both a machine-readable value for the purposes
  of data processors, and a human-readable value for the purposes of rendering in a web browser. In
  this case, the format to be used in the <code id=the-data-element:attr-data-value-3><a href=#attr-data-value>value</a></code> attribute is
  determined by the microformats or microdata vocabulary in use.</p>

  <p>The element can also, however, be used in conjunction with scripts in the page, for when a
  script has a literal value to store alongside a human-readable value. In such cases, the format to
  be used depends only on the needs of the script. (The <code id=the-data-element:attr-data-*><a href=dom.html#attr-data-*>data-*</a></code>
  attributes can also be useful in such situations.)</p>

  <div class=example>

   <p>Here, a short table has its numeric values encoded using the <code id=the-data-element:the-data-element-2><a href=#the-data-element>data</a></code> element so
   that the table sorting JavaScript library can provide a sorting mechanism on each column
   despite the numbers being presented in textual form in one column and in a decomposed form in
   another.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>script</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;sortable.js&quot;</c-><c- p>&gt;&lt;/</c-><c- f>script</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>table</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;sortable&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>thead</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Game <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Corporations <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Map Size
 <c- p>&lt;</c-><c- f>tbody</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 1830 <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>data</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;8&quot;</c-><c- p>&gt;</c->Eight<c- p>&lt;/</c-><c- f>data</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>data</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;93&quot;</c-><c- p>&gt;</c->19+74 hexes (93 total)<c- p>&lt;/</c-><c- f>data</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 1856 <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>data</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;11&quot;</c-><c- p>&gt;</c->Eleven<c- p>&lt;/</c-><c- f>data</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>data</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;99&quot;</c-><c- p>&gt;</c->12+87 hexes (99 total)<c- p>&lt;/</c-><c- f>data</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> 1870 <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>data</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;10&quot;</c-><c- p>&gt;</c->Ten<c- p>&lt;/</c-><c- f>data</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>data</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;149&quot;</c-><c- p>&gt;</c->4+145 hexes (149 total)<c- p>&lt;/</c-><c- f>data</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>table</c-><c- p>&gt;</c-></code></pre>

  </div>




  <h4 id=the-time-element><span class=secno>4.5.14</span> The <dfn data-dfn-type=element><code>time</code></dfn> element<a href=#the-time-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time title="The <time> HTML element represents a specific period in time. It may include the datetime attribute to translate dates into machine-readable format, allowing for better search engine results or custom features such as reminders.">Element/time</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>22+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span>62+</span></span><hr><span class="opera yes"><span>Opera</span><span>49+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>18</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>4+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>46+</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-time-element:concept-element-categories>Categories</a>:<dd><a id=the-time-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-time-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-time-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-time-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-time-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-time-element:concept-element-content-model>Content model</a>:<dd>If the element has a <code id=the-time-element:attr-time-datetime><a href=#attr-time-datetime>datetime</a></code> attribute: <a id=the-time-element:phrasing-content-2-3 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd>Otherwise: <a href=dom.html#text-content id=the-time-element:text-content>Text</a>, but must match requirements described in prose below.<dt><a href=dom.html#concept-element-tag-omission id=the-time-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-time-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-time-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-time-element:attr-time-datetime-2><a href=#attr-time-datetime>datetime</a></code> —  Machine-readable value
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-time-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-time>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-time>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-time-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLTimeElement</code>.</dl>

  <p>The <code id=the-time-element:the-time-element><a href=#the-time-element>time</a></code> element <a id=the-time-element:represents href=dom.html#represents>represents</a> its contents, along with a
  machine-readable form of those contents in the <code id=the-time-element:attr-time-datetime-3><a href=#attr-time-datetime>datetime</a></code>
  attribute. The kind of content is limited to various kinds of dates, times, time-zone offsets, and
  durations, as described below.</p>

  <p>The <dfn data-dfn-for=time id=attr-time-datetime data-dfn-type=element-attr><code>datetime</code></dfn>
  attribute may be present. If present, its value must be a representation of the element's contents
  in a machine-readable format.</p>

  <p>A <code id=the-time-element:the-time-element-2><a href=#the-time-element>time</a></code> element that does not have a <code id=the-time-element:attr-time-datetime-4><a href=#attr-time-datetime>datetime</a></code> content attribute must not have any element
  descendants.</p>

  <p>The <dfn id=datetime-value>datetime value</dfn> of a <code id=the-time-element:the-time-element-3><a href=#the-time-element>time</a></code> element is the value of the element's
  <code id=the-time-element:attr-time-datetime-5><a href=#attr-time-datetime>datetime</a></code> content attribute, if it has one, otherwise the
  <a id=the-time-element:child-text-content href=https://dom.spec.whatwg.org/#concept-child-text-content data-x-internal=child-text-content>child text content</a> of the <code id=the-time-element:the-time-element-4><a href=#the-time-element>time</a></code> element.</p>

  <p>The <a href=#datetime-value id=the-time-element:datetime-value>datetime value</a> of a <code id=the-time-element:the-time-element-5><a href=#the-time-element>time</a></code> element must match one of the following
  syntaxes.</p>

  <dl><dt>A <a id=the-time-element:valid-month-string href=common-microsyntaxes.html#valid-month-string>valid month string</a><dd>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011-11<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>
   <dt>A <a id=the-time-element:valid-date-string href=common-microsyntaxes.html#valid-date-string>valid date string</a><dd>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011-11-18<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>
   <dt>A <a id=the-time-element:valid-yearless-date-string href=common-microsyntaxes.html#valid-yearless-date-string>valid yearless date string</a><dd>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->11-18<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>
   <dt>A <a id=the-time-element:valid-time-string href=common-microsyntaxes.html#valid-time-string>valid time string</a><dd>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->14:54<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->14:54:39<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->14:54:39.929<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>
   <dt>A <a id=the-time-element:valid-local-date-and-time-string href=common-microsyntaxes.html#valid-local-date-and-time-string>valid local date and time string</a><dd>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011-11-18T14:54<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011-11-18T14:54:39<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011-11-18T14:54:39.929<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011-11-18 14:54<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011-11-18 14:54:39<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011-11-18 14:54:39.929<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>

    <p class=note>Times with dates but without a time zone offset are useful for specifying events
    that are observed at the same specific time in each time zone, throughout a day. For example,
    the 2020 new year is celebrated at 2020-01-01 00:00 in each time zone, not at the same precise
    moment across all time zones. For events that occur at the same time across all time zones, for
    example a videoconference meeting, a <a id=the-time-element:valid-global-date-and-time-string href=common-microsyntaxes.html#valid-global-date-and-time-string>valid global date and time string</a> is likely
    more useful.</p>
   <dt>A <a id=the-time-element:valid-time-zone-offset-string href=common-microsyntaxes.html#valid-time-zone-offset-string>valid time-zone offset string</a><dd>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->Z<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->+0000<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->+00:00<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->-0800<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->-08:00<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>

    <p class=note>For times without dates (or times referring to events that recur on multiple
    dates), specifying the geographic location that controls the time is usually more useful than
    specifying a time zone offset, because geographic locations change time zone offsets with
    daylight saving time. In some cases, geographic locations even change time zone, e.g. when the
    boundaries of those time zones are redrawn, as happened with Samoa at the end of 2011. There
    exists a time zone database that describes the boundaries of time zones and what rules apply
    within each such zone, known as the <i>time zone database</i>. <a href=references.html#refsTZDATABASE>[TZDATABASE]</a></p>
   <dt>A <a id=the-time-element:valid-global-date-and-time-string-2 href=common-microsyntaxes.html#valid-global-date-and-time-string>valid global date and time string</a><dd>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011-11-18T14:54Z<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011-11-18T14:54:39Z<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011-11-18T14:54:39.929Z<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>

    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011-11-18T14:54+0000<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011-11-18T14:54:39+0000<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011-11-18T14:54:39.929+0000<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>

    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011-11-18T14:54+00:00<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011-11-18T14:54:39+00:00<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011-11-18T14:54:39.929+00:00<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>

    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011-11-18T06:54-0800<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011-11-18T06:54:39-0800<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011-11-18T06:54:39.929-0800<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>

    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011-11-18T06:54-08:00<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011-11-18T06:54:39-08:00<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011-11-18T06:54:39.929-08:00<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>

    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011-11-18 14:54Z<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011-11-18 14:54:39Z<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011-11-18 14:54:39.929Z<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>

    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011-11-18 14:54+0000<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011-11-18 14:54:39+0000<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011-11-18 14:54:39.929+0000<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>

    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011-11-18 14:54+00:00<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011-11-18 14:54:39+00:00<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011-11-18 14:54:39.929+00:00<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>

    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011-11-18 06:54-0800<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011-11-18 06:54:39-0800<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011-11-18 06:54:39.929-0800<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>

    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011-11-18 06:54-08:00<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011-11-18 06:54:39-08:00<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011-11-18 06:54:39.929-08:00<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>

    <p class=note>Times with dates and a time zone offset are useful for specifying specific
    events, or recurring virtual events where the time is not anchored to a specific geographic
    location. For example, the precise time of an asteroid impact, or a particular meeting in a
    series of meetings held at 1400 UTC every day, regardless of whether any particular part of the
    world is observing daylight saving time or not. For events where the precise time varies by the
    local time zone offset of a specific geographic location, a <a id=the-time-element:valid-local-date-and-time-string-2 href=common-microsyntaxes.html#valid-local-date-and-time-string>valid local date and time
    string</a> combined with that geographic location is likely more useful.</p>
   <dt>A <a id=the-time-element:valid-week-string href=common-microsyntaxes.html#valid-week-string>valid week string</a><dd>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011-W47<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>
   <dt>Four or more <a id=the-time-element:ascii-digits href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII digits</a>, at least one of which is not U+0030 DIGIT ZERO (0)<dd>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->2011<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>

    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->0001<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>
   <dt>A <a id=the-time-element:valid-duration-string href=common-microsyntaxes.html#valid-duration-string>valid duration string</a><dd>
    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->PT4H18M3S<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>

    <pre class=example><code class='html'><c- p>&lt;</c-><c- f>time</c-><c- p>&gt;</c->4h 18m 3s<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></code></pre>
   </dl>

  

  <div class=example>

   <p>The <code id=the-time-element:the-time-element-6><a href=#the-time-element>time</a></code> element can be used to encode dates, for example in microformats. The
   following shows a hypothetical way of encoding an event using a variant on hCalendar that uses
   the <code id=the-time-element:the-time-element-7><a href=#the-time-element>time</a></code> element:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;vevent&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>a</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;url&quot;</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;http://www.web2con.com/&quot;</c-><c- p>&gt;</c->http://www.web2con.com/<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>span</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;summary&quot;</c-><c- p>&gt;</c->Web 2.0 Conference<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c->:
 <c- p>&lt;</c-><c- f>time</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;dtstart&quot;</c-> <c- e>datetime</c-><c- o>=</c-><c- s>&quot;2005-10-05&quot;</c-><c- p>&gt;</c->October 5<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-> -
 <c- p>&lt;</c-><c- f>time</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;dtend&quot;</c-> <c- e>datetime</c-><c- o>=</c-><c- s>&quot;2005-10-07&quot;</c-><c- p>&gt;</c->7<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c->,
 at the <c- p>&lt;</c-><c- f>span</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;location&quot;</c-><c- p>&gt;</c->Argent Hotel, San Francisco, CA<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>div</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>Here, a fictional microdata vocabulary based on the Atom vocabulary is used with the
   <code id=the-time-element:the-time-element-8><a href=#the-time-element>time</a></code> element to mark up a blog post's publication date.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>article</c-> <c- e>itemscope</c-> <c- e>itemtype</c-><c- o>=</c-><c- s>&quot;https://n.example.org/rfc4287&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h1</c-> <c- e>itemprop</c-><c- o>=</c-><c- s>&quot;title&quot;</c-><c- p>&gt;</c->Big tasks<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>footer</c-><c- p>&gt;</c->Published <c- p>&lt;</c-><c- f>time</c-> <c- e>itemprop</c-><c- o>=</c-><c- s>&quot;published&quot;</c-> <c- e>datetime</c-><c- o>=</c-><c- s>&quot;2009-08-29&quot;</c-><c- p>&gt;</c->two days ago<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c->.<c- p>&lt;/</c-><c- f>footer</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-> <c- e>itemprop</c-><c- o>=</c-><c- s>&quot;content&quot;</c-><c- p>&gt;</c->Today, I went out and bought a bike for my kid.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>article</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>In this example, another article's publication date is marked up using <code id=the-time-element:the-time-element-9><a href=#the-time-element>time</a></code>, this
   time using the schema.org microdata vocabulary:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>article</c-> <c- e>itemscope</c-> <c- e>itemtype</c-><c- o>=</c-><c- s>&quot;http://schema.org/BlogPosting&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h1</c-> <c- e>itemprop</c-><c- o>=</c-><c- s>&quot;headline&quot;</c-><c- p>&gt;</c->Small tasks<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>footer</c-><c- p>&gt;</c->Published <c- p>&lt;</c-><c- f>time</c-> <c- e>itemprop</c-><c- o>=</c-><c- s>&quot;datePublished&quot;</c-> <c- e>datetime</c-><c- o>=</c-><c- s>&quot;2009-08-30&quot;</c-><c- p>&gt;</c->yesterday<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c->.<c- p>&lt;/</c-><c- f>footer</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-> <c- e>itemprop</c-><c- o>=</c-><c- s>&quot;articleBody&quot;</c-><c- p>&gt;</c->I put a bike bell on her bike.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>article</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>In the following snippet, the <code id=the-time-element:the-time-element-10><a href=#the-time-element>time</a></code> element is used to encode a date in the
   ISO8601 format, for later processing by a script:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Our first date was <c- p>&lt;</c-><c- f>time</c-> <c- e>datetime</c-><c- o>=</c-><c- s>&quot;2006-09-23&quot;</c-><c- p>&gt;</c->a Saturday<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c->.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>In this second snippet, the value includes a time:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->We stopped talking at <c- p>&lt;</c-><c- f>time</c-> <c- e>datetime</c-><c- o>=</c-><c- s>&quot;2006-09-24T05:00-07:00&quot;</c-><c- p>&gt;</c->5am the next morning<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c->.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>A script loaded by the page (and thus privy to the page's internal convention of marking up
   dates and times using the <code id=the-time-element:the-time-element-11><a href=#the-time-element>time</a></code> element) could scan through the page and look at all
   the <code id=the-time-element:the-time-element-12><a href=#the-time-element>time</a></code> elements therein to create an index of dates and times.</p>

  </div>

  <div class=example>

   <p>For example, this element conveys the string "Friday" with the additional semantic that the
   18th of November 2011 is the meaning that corresponds to "Friday":</p>

   <pre><code class='html'>Today is <c- p>&lt;</c-><c- f>time</c-> <c- e>datetime</c-><c- o>=</c-><c- s>&quot;2011-11-18&quot;</c-><c- p>&gt;</c->Friday<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c->.</code></pre>

  </div>

  <div class=example>

   <p>In this example, a specific time in the Pacific Standard Time timezone is specified:</p>

   <pre><code class='html'>Your next meeting is at <c- p>&lt;</c-><c- f>time</c-> <c- e>datetime</c-><c- o>=</c-><c- s>&quot;2011-11-18T15:00-08:00&quot;</c-><c- p>&gt;</c->3pm<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c->.</code></pre>

  </div>




  <h4 id=the-code-element><span class=secno>4.5.15</span> The <dfn data-dfn-type=element><code>code</code></dfn> element<a href=#the-code-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code title="The <code> HTML element displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code. By default, the content text is displayed using the user agent's default monospace font.">Element/code</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-code-element:concept-element-categories>Categories</a>:<dd><a id=the-code-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-code-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-code-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-code-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-code-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-code-element:concept-element-content-model>Content model</a>:<dd><a id=the-code-element:phrasing-content-2-3 href=dom.html#phrasing-content-2>Phrasing content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-code-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-code-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-code-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-code-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-code>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-code>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-code-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLElement</code>.</dl>

  <p>The <code id=the-code-element:the-code-element><a href=#the-code-element>code</a></code> element <a id=the-code-element:represents href=dom.html#represents>represents</a> a fragment of computer code. This could
  be an XML element name, a filename, a computer program, or any other string that a computer would
  recognize.</p>

  <p>There is no formal way to indicate the language of computer code being marked up. Authors who
  wish to mark <code id=the-code-element:the-code-element-2><a href=#the-code-element>code</a></code> elements with the language used, e.g. so that syntax highlighting
  scripts can use the right rules, can use the <code id=the-code-element:classes><a href=dom.html#classes>class</a></code> attribute, e.g.
  by adding a class prefixed with "<code>language-</code>" to the element.</p>

  <div class=example>

   <p>The following example shows how the element can be used in a paragraph to mark up element
   names and computer code, including punctuation.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The <c- p>&lt;</c-><c- f>code</c-><c- p>&gt;</c->code<c- p>&lt;/</c-><c- f>code</c-><c- p>&gt;</c-> element represents a fragment of computer
code.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->

<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->When you call the <c- p>&lt;</c-><c- f>code</c-><c- p>&gt;</c->activate()<c- p>&lt;/</c-><c- f>code</c-><c- p>&gt;</c-> method on the
<c- p>&lt;</c-><c- f>code</c-><c- p>&gt;</c->robotSnowman<c- p>&lt;/</c-><c- f>code</c-><c- p>&gt;</c-> object, the eyes glow.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->

<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The example below uses the <c- p>&lt;</c-><c- f>code</c-><c- p>&gt;</c->begin<c- p>&lt;/</c-><c- f>code</c-><c- p>&gt;</c-> keyword to indicate
the start of a statement block. It is paired with an <c- p>&lt;</c-><c- f>code</c-><c- p>&gt;</c->end<c- p>&lt;/</c-><c- f>code</c-><c- p>&gt;</c->
keyword, which is followed by the <c- p>&lt;</c-><c- f>code</c-><c- p>&gt;</c->.<c- p>&lt;/</c-><c- f>code</c-><c- p>&gt;</c-> punctuation character
(full stop) to indicate the end of the program.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>The following example shows how a block of code could be marked up using the <code id=the-code-element:the-pre-element><a href=grouping-content.html#the-pre-element>pre</a></code>
   and <code id=the-code-element:the-code-element-3><a href=#the-code-element>code</a></code> elements.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>pre</c-><c- p>&gt;&lt;</c-><c- f>code</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;language-pascal&quot;</c-><c- p>&gt;</c->var i: Integer;
begin
   i := 1;
end.<c- p>&lt;/</c-><c- f>code</c-><c- p>&gt;&lt;/</c-><c- f>pre</c-><c- p>&gt;</c-></code></pre>

   <p>A class is used in that example to indicate the language used.</p>

  </div>

  <p class=note>See the <code id=the-code-element:the-pre-element-2><a href=grouping-content.html#the-pre-element>pre</a></code> element for more details.</p>


  <h4 id=the-var-element><span class=secno>4.5.16</span> The <dfn data-dfn-type=element><code>var</code></dfn> element<a href=#the-var-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/var title="The <var> HTML element represents the name of a variable in a mathematical expression or a programming context. It's typically presented using an italicized version of the current typeface, although that behavior is browser-dependent.">Element/var</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-var-element:concept-element-categories>Categories</a>:<dd><a id=the-var-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-var-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-var-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-var-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-var-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-var-element:concept-element-content-model>Content model</a>:<dd><a id=the-var-element:phrasing-content-2-3 href=dom.html#phrasing-content-2>Phrasing content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-var-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-var-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-var-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-var-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-var>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-var>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-var-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLElement</code>.</dl>

  <p>The <code id=the-var-element:the-var-element><a href=#the-var-element>var</a></code> element <a id=the-var-element:represents href=dom.html#represents>represents</a> a variable. This could be an actual
  variable in a mathematical expression or programming context, an identifier representing a
  constant, a symbol identifying a physical quantity, a function parameter, or just be a term used
  as a placeholder in prose.</p>

  <div class=example>
   <p>In the paragraph below, the letter "n" is being used as a
   variable in prose:</p>
   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->If there are <c- p>&lt;</c-><c- f>var</c-><c- p>&gt;</c->n<c- p>&lt;/</c-><c- f>var</c-><c- p>&gt;</c-> pipes leading to the ice
cream factory then I expect at <c- p>&lt;</c-><c- f>em</c-><c- p>&gt;</c->least<c- p>&lt;/</c-><c- f>em</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>var</c-><c- p>&gt;</c->n<c- p>&lt;/</c-><c- f>var</c-><c- p>&gt;</c->
flavors of ice cream to be available for purchase!<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>
  </div>

  <p>For mathematics, in particular for anything beyond the simplest of expressions, MathML is more
  appropriate. However, the <code id=the-var-element:the-var-element-2><a href=#the-var-element>var</a></code> element can still be used to refer to specific
  variables that are then mentioned in MathML expressions.</p>

  <div class=example>

   <p>In this example, an equation is shown, with a legend that references the variables in the
   equation. The expression itself is marked up with MathML, but the variables are mentioned in the
   figure's legend using <code id=the-var-element:the-var-element-3><a href=#the-var-element>var</a></code>.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>figure</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>math</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>mi</c-><c- p>&gt;</c->a<c- p>&lt;/</c-><c- f>mi</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>mo</c-><c- p>&gt;</c->=<c- p>&lt;/</c-><c- f>mo</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>msqrt</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>msup</c-><c- p>&gt;&lt;</c-><c- f>mi</c-><c- p>&gt;</c->b<c- p>&lt;/</c-><c- f>mi</c-><c- p>&gt;&lt;</c-><c- f>mn</c-><c- p>&gt;</c->2<c- p>&lt;/</c-><c- f>mn</c-><c- p>&gt;&lt;/</c-><c- f>msup</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>mi</c-><c- p>&gt;</c->+<c- p>&lt;/</c-><c- f>mi</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>msup</c-><c- p>&gt;&lt;</c-><c- f>mi</c-><c- p>&gt;</c->c<c- p>&lt;/</c-><c- f>mi</c-><c- p>&gt;&lt;</c-><c- f>mn</c-><c- p>&gt;</c->2<c- p>&lt;/</c-><c- f>mn</c-><c- p>&gt;&lt;/</c-><c- f>msup</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>msqrt</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>math</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>figcaption</c-><c- p>&gt;</c->
  Using Pythagoras&apos; theorem to solve for the hypotenuse <c- p>&lt;</c-><c- f>var</c-><c- p>&gt;</c->a<c- p>&lt;/</c-><c- f>var</c-><c- p>&gt;</c-> of
  a triangle with sides <c- p>&lt;</c-><c- f>var</c-><c- p>&gt;</c->b<c- p>&lt;/</c-><c- f>var</c-><c- p>&gt;</c-> and <c- p>&lt;</c-><c- f>var</c-><c- p>&gt;</c->c<c- p>&lt;/</c-><c- f>var</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>figcaption</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>figure</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>Here, the equation describing mass-energy equivalence is used in a sentence, and the
   <code id=the-var-element:the-var-element-4><a href=#the-var-element>var</a></code> element is used to mark the variables and constants in that equation:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Then she turned to the blackboard and picked up the chalk. After a few moment&apos;s
thought, she wrote <c- p>&lt;</c-><c- f>var</c-><c- p>&gt;</c->E<c- p>&lt;/</c-><c- f>var</c-><c- p>&gt;</c-> = <c- p>&lt;</c-><c- f>var</c-><c- p>&gt;</c->m<c- p>&lt;/</c-><c- f>var</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>var</c-><c- p>&gt;</c->c<c- p>&lt;/</c-><c- f>var</c-><c- p>&gt;&lt;</c-><c- f>sup</c-><c- p>&gt;</c->2<c- p>&lt;/</c-><c- f>sup</c-><c- p>&gt;</c->. The teacher
looked pleased.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>


  <h4 id=the-samp-element><span class=secno>4.5.17</span> The <dfn data-dfn-type=element><code>samp</code></dfn> element<a href=#the-samp-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/samp title="The <samp> HTML element is used to enclose inline text which represents sample (or quoted) output from a computer program. Its contents are typically rendered using the browser's default monospaced font (such as Courier or Lucida Console).">Element/samp</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-samp-element:concept-element-categories>Categories</a>:<dd><a id=the-samp-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-samp-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-samp-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-samp-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-samp-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-samp-element:concept-element-content-model>Content model</a>:<dd><a id=the-samp-element:phrasing-content-2-3 href=dom.html#phrasing-content-2>Phrasing content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-samp-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-samp-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-samp-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-samp-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-samp>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-samp>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-samp-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLElement</code>.</dl>

  <p>The <code id=the-samp-element:the-samp-element><a href=#the-samp-element>samp</a></code> element <a id=the-samp-element:represents href=dom.html#represents>represents</a> sample or quoted output from another
  program or computing system.</p>

  <p class=note>See the <code id=the-samp-element:the-pre-element><a href=grouping-content.html#the-pre-element>pre</a></code> and <code id=the-samp-element:the-kbd-element><a href=#the-kbd-element>kbd</a></code> elements for more details.</p>

  <p class=note>This element can be contrasted with the <code id=the-samp-element:the-output-element><a href=form-elements.html#the-output-element>output</a></code> element, which can be
  used to provide immediate output in a web application.</p>

  <div class=example>
   <p>This example shows the <code id=the-samp-element:the-samp-element-2><a href=#the-samp-element>samp</a></code> element being used
   inline:</p>
   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The computer said <c- p>&lt;</c-><c- f>samp</c-><c- p>&gt;</c->Too much cheese in tray
two<c- p>&lt;/</c-><c- f>samp</c-><c- p>&gt;</c-> but I didn&apos;t know what that meant.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>
  </div>

  <div class=example>

   <p>This second example shows a block of sample output from a console program. Nested
   <code id=the-samp-element:the-samp-element-3><a href=#the-samp-element>samp</a></code> and <code id=the-samp-element:the-kbd-element-2><a href=#the-kbd-element>kbd</a></code> elements allow for the styling of specific elements
   of the sample output using a style sheet. There's also a few parts of the <code id=the-samp-element:the-samp-element-4><a href=#the-samp-element>samp</a></code> that
   are annotated with even more detailed markup, to enable very precise styling. To achieve this,
   <code id=the-samp-element:the-span-element><a href=#the-span-element>span</a></code> elements are used.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>pre</c-><c- p>&gt;&lt;</c-><c- f>samp</c-><c- p>&gt;&lt;</c-><c- f>span</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;prompt&quot;</c-><c- p>&gt;</c->jdoe@mowmow:~$<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>kbd</c-><c- p>&gt;</c->ssh demo.example.com<c- p>&lt;/</c-><c- f>kbd</c-><c- p>&gt;</c->
Last login: Tue Apr 12 09:10:17 2005 from mowmow.example.com on pts/1
Linux demo 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189 #1 SMP Tue Feb 1 11:22:36 PST 2005 i686 unknown

<c- p>&lt;</c-><c- f>span</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;prompt&quot;</c-><c- p>&gt;</c->jdoe@demo:~$<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>span</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;cursor&quot;</c-><c- p>&gt;</c->_<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;&lt;/</c-><c- f>samp</c-><c- p>&gt;&lt;/</c-><c- f>pre</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>This third example shows a block of input and its respective output. The example uses
   both <code id=the-samp-element:the-code-element><a href=#the-code-element>code</a></code> and <code id=the-samp-element:the-samp-element-5><a href=#the-samp-element>samp</a></code> elements.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>pre</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>code</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;language-javascript&quot;</c-><c- p>&gt;</c->console.log(2.3 + 2.4)<c- p>&lt;/</c-><c- f>code</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>samp</c-><c- p>&gt;</c->4.699999999999999<c- p>&lt;/</c-><c- f>samp</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>pre</c-><c- p>&gt;</c-></code></pre>

  </div>


  <h4 id=the-kbd-element><span class=secno>4.5.18</span> The <dfn data-dfn-type=element><code>kbd</code></dfn> element<a href=#the-kbd-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd title="The <kbd> HTML element represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device. By convention, the user agent defaults to rendering the contents of a <kbd> element using its default monospace font, although this is not mandated by the HTML standard.">Element/kbd</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>4+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-kbd-element:concept-element-categories>Categories</a>:<dd><a id=the-kbd-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-kbd-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-kbd-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-kbd-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-kbd-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-kbd-element:concept-element-content-model>Content model</a>:<dd><a id=the-kbd-element:phrasing-content-2-3 href=dom.html#phrasing-content-2>Phrasing content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-kbd-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-kbd-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-kbd-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-kbd-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-kbd>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-kbd>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-kbd-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLElement</code>.</dl>

  <p>The <code id=the-kbd-element:the-kbd-element><a href=#the-kbd-element>kbd</a></code> element <a id=the-kbd-element:represents href=dom.html#represents>represents</a> user input (typically keyboard input,
  although it may also be used to represent other input, such as voice commands).</p>

  <p>When the <code id=the-kbd-element:the-kbd-element-2><a href=#the-kbd-element>kbd</a></code> element is nested inside a <code id=the-kbd-element:the-samp-element><a href=#the-samp-element>samp</a></code> element, it represents
  the input as it was echoed by the system.</p>

  <p>When the <code id=the-kbd-element:the-kbd-element-3><a href=#the-kbd-element>kbd</a></code> element <em>contains</em> a <code id=the-kbd-element:the-samp-element-2><a href=#the-samp-element>samp</a></code> element, it represents
  input based on system output, for example invoking a menu item.</p>

  <p>When the <code id=the-kbd-element:the-kbd-element-4><a href=#the-kbd-element>kbd</a></code> element is nested inside another <code id=the-kbd-element:the-kbd-element-5><a href=#the-kbd-element>kbd</a></code> element, it
  represents an actual key or other single unit of input as appropriate for the input mechanism.</p>

  <div class=example>

   <p>Here the <code id=the-kbd-element:the-kbd-element-6><a href=#the-kbd-element>kbd</a></code> element is used to indicate keys to press:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->To make George eat an apple, press <c- p>&lt;</c-><c- f>kbd</c-><c- p>&gt;&lt;</c-><c- f>kbd</c-><c- p>&gt;</c->Shift<c- p>&lt;/</c-><c- f>kbd</c-><c- p>&gt;</c-> + <c- p>&lt;</c-><c- f>kbd</c-><c- p>&gt;</c->F3<c- p>&lt;/</c-><c- f>kbd</c-><c- p>&gt;&lt;/</c-><c- f>kbd</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>In this second example, the user is told to pick a particular menu item. The outer
   <code id=the-kbd-element:the-kbd-element-7><a href=#the-kbd-element>kbd</a></code> element marks up a block of input, with the inner <code id=the-kbd-element:the-kbd-element-8><a href=#the-kbd-element>kbd</a></code> elements
   representing each individual step of the input, and the <code id=the-kbd-element:the-samp-element-3><a href=#the-samp-element>samp</a></code> elements inside them
   indicating that the steps are input based on something being displayed by the system, in this
   case menu labels:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->To make George eat an apple, select
    <c- p>&lt;</c-><c- f>kbd</c-><c- p>&gt;&lt;</c-><c- f>kbd</c-><c- p>&gt;&lt;</c-><c- f>samp</c-><c- p>&gt;</c->File<c- p>&lt;/</c-><c- f>samp</c-><c- p>&gt;&lt;/</c-><c- f>kbd</c-><c- p>&gt;</c->|<c- p>&lt;</c-><c- f>kbd</c-><c- p>&gt;&lt;</c-><c- f>samp</c-><c- p>&gt;</c->Eat Apple...<c- p>&lt;/</c-><c- f>samp</c-><c- p>&gt;&lt;/</c-><c- f>kbd</c-><c- p>&gt;&lt;/</c-><c- f>kbd</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>Such precision isn't necessary; the following is equally fine:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->To make George eat an apple, select <c- p>&lt;</c-><c- f>kbd</c-><c- p>&gt;</c->File | Eat Apple...<c- p>&lt;/</c-><c- f>kbd</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>


  <h4 id=the-sub-and-sup-elements><span class=secno>4.5.19</span> The <dfn id=the-sub-element data-dfn-type=element><code>sub</code></dfn> and <dfn id=the-sup-element data-dfn-type=element><code>sup</code></dfn> elements<a href=#the-sub-and-sup-elements class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub title="The <sub> HTML element specifies inline text which should be displayed as subscript for solely typographical reasons. Subscripts are typically rendered with a lowered baseline using smaller text.">Element/sub</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup title="The <sup> HTML element specifies inline text which is to be displayed as superscript for solely typographical reasons. Superscripts are usually rendered with a raised baseline using smaller text.">Element/sup</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-sub-and-sup-elements:concept-element-categories>Categories</a>:<dd><a id=the-sub-and-sup-elements:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-sub-and-sup-elements:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-sub-and-sup-elements:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-sub-and-sup-elements:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-sub-and-sup-elements:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-sub-and-sup-elements:concept-element-content-model>Content model</a>:<dd><a id=the-sub-and-sup-elements:phrasing-content-2-3 href=dom.html#phrasing-content-2>Phrasing content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-sub-and-sup-elements:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-sub-and-sup-elements:concept-element-attributes>Content attributes</a>:<dd><a id=the-sub-and-sup-elements:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-sub-and-sup-elements:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd>The <code id=the-sub-and-sup-elements:the-sub-and-sup-elements><a href=#the-sub-and-sup-elements>sub</a></code> element: <a href=https://w3c.github.io/html-aria/#el-sub>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-sub>for implementers</a>.<dd>The <code id=the-sub-and-sup-elements:the-sub-and-sup-elements-2><a href=#the-sub-and-sup-elements>sup</a></code> element: <a href=https://w3c.github.io/html-aria/#el-sup>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-sup>for implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-sub-and-sup-elements:concept-element-dom>DOM interface</a>:<dd>Use <code>HTMLElement</code>.</dl>

  <p>The <code id=the-sub-and-sup-elements:the-sub-and-sup-elements-3><a href=#the-sub-and-sup-elements>sup</a></code> element <a id=the-sub-and-sup-elements:represents href=dom.html#represents>represents</a> a superscript and the <code id=the-sub-and-sup-elements:the-sub-and-sup-elements-4><a href=#the-sub-and-sup-elements>sub</a></code>
  element <a id=the-sub-and-sup-elements:represents-2 href=dom.html#represents>represents</a> a subscript.</p>

  <p>These elements must be used only to mark up typographical conventions with specific meanings,
  not for typographical presentation for presentation's sake. For example, it would be inappropriate
  for the <code id=the-sub-and-sup-elements:the-sub-and-sup-elements-5><a href=#the-sub-and-sup-elements>sub</a></code> and <code id=the-sub-and-sup-elements:the-sub-and-sup-elements-6><a href=#the-sub-and-sup-elements>sup</a></code> elements to be used in the name of the LaTeX
  document preparation system. In general, authors should use these elements only if the
  <em>absence</em> of those elements would change the meaning of the content.</p>

  <p>In certain languages, superscripts are part of the typographical conventions for some
  abbreviations.</p>

  <div class=example>
   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Their names are
<c- p>&lt;</c-><c- f>span</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;fr&quot;</c-><c- p>&gt;&lt;</c-><c- f>abbr</c-><c- p>&gt;</c->M<c- p>&lt;</c-><c- f>sup</c-><c- p>&gt;</c->lle<c- p>&lt;/</c-><c- f>sup</c-><c- p>&gt;&lt;/</c-><c- f>abbr</c-><c- p>&gt;</c-> Gwendoline<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c-> and
<c- p>&lt;</c-><c- f>span</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;fr&quot;</c-><c- p>&gt;&lt;</c-><c- f>abbr</c-><c- p>&gt;</c->M<c- p>&lt;</c-><c- f>sup</c-><c- p>&gt;</c->me<c- p>&lt;/</c-><c- f>sup</c-><c- p>&gt;&lt;/</c-><c- f>abbr</c-><c- p>&gt;</c-> Denise<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c->.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>
  </div>

  <p>The <code id=the-sub-and-sup-elements:the-sub-and-sup-elements-7><a href=#the-sub-and-sup-elements>sub</a></code> element can be used inside a <code id=the-sub-and-sup-elements:the-var-element><a href=#the-var-element>var</a></code> element, for variables that
  have subscripts.</p>

  <div class=example>

   <p>Here, the <code id=the-sub-and-sup-elements:the-sub-and-sup-elements-8><a href=#the-sub-and-sup-elements>sub</a></code> element is used to represent the subscript that identifies the
   variable in a family of variables:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The coordinate of the <c- p>&lt;</c-><c- f>var</c-><c- p>&gt;</c->i<c- p>&lt;/</c-><c- f>var</c-><c- p>&gt;</c->th point is
(<c- p>&lt;</c-><c- f>var</c-><c- p>&gt;</c->x<c- p>&lt;</c-><c- f>sub</c-><c- p>&gt;&lt;</c-><c- f>var</c-><c- p>&gt;</c->i<c- p>&lt;/</c-><c- f>var</c-><c- p>&gt;&lt;/</c-><c- f>sub</c-><c- p>&gt;&lt;/</c-><c- f>var</c-><c- p>&gt;</c->, <c- p>&lt;</c-><c- f>var</c-><c- p>&gt;</c->y<c- p>&lt;</c-><c- f>sub</c-><c- p>&gt;&lt;</c-><c- f>var</c-><c- p>&gt;</c->i<c- p>&lt;/</c-><c- f>var</c-><c- p>&gt;&lt;/</c-><c- f>sub</c-><c- p>&gt;&lt;/</c-><c- f>var</c-><c- p>&gt;</c->).
For example, the 10th point has coordinate
(<c- p>&lt;</c-><c- f>var</c-><c- p>&gt;</c->x<c- p>&lt;</c-><c- f>sub</c-><c- p>&gt;</c->10<c- p>&lt;/</c-><c- f>sub</c-><c- p>&gt;&lt;/</c-><c- f>var</c-><c- p>&gt;</c->, <c- p>&lt;</c-><c- f>var</c-><c- p>&gt;</c->y<c- p>&lt;</c-><c- f>sub</c-><c- p>&gt;</c->10<c- p>&lt;/</c-><c- f>sub</c-><c- p>&gt;&lt;/</c-><c- f>var</c-><c- p>&gt;</c->).<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>
  </div>

  <p>Mathematical expressions often use subscripts and superscripts. Authors are encouraged to use
  MathML for marking up mathematics, but authors may opt to use <code id=the-sub-and-sup-elements:the-sub-and-sup-elements-9><a href=#the-sub-and-sup-elements>sub</a></code> and
  <code id=the-sub-and-sup-elements:the-sub-and-sup-elements-10><a href=#the-sub-and-sup-elements>sup</a></code> if detailed mathematical markup is not desired. <a href=references.html#refsMATHML>[MATHML]</a></p>

  <div class=example>
   <pre><code class='html'><c- p>&lt;</c-><c- f>var</c-><c- p>&gt;</c->E<c- p>&lt;/</c-><c- f>var</c-><c- p>&gt;</c->=<c- p>&lt;</c-><c- f>var</c-><c- p>&gt;</c->m<c- p>&lt;/</c-><c- f>var</c-><c- p>&gt;&lt;</c-><c- f>var</c-><c- p>&gt;</c->c<c- p>&lt;/</c-><c- f>var</c-><c- p>&gt;&lt;</c-><c- f>sup</c-><c- p>&gt;</c->2<c- p>&lt;/</c-><c- f>sup</c-><c- p>&gt;</c-></code></pre>
   <pre><code class='html'>f(<c- p>&lt;</c-><c- f>var</c-><c- p>&gt;</c->x<c- p>&lt;/</c-><c- f>var</c-><c- p>&gt;</c->, <c- p>&lt;</c-><c- f>var</c-><c- p>&gt;</c->n<c- p>&lt;/</c-><c- f>var</c-><c- p>&gt;</c->) = log<c- p>&lt;</c-><c- f>sub</c-><c- p>&gt;</c->4<c- p>&lt;/</c-><c- f>sub</c-><c- p>&gt;&lt;</c-><c- f>var</c-><c- p>&gt;</c->x<c- p>&lt;/</c-><c- f>var</c-><c- p>&gt;&lt;</c-><c- f>sup</c-><c- p>&gt;&lt;</c-><c- f>var</c-><c- p>&gt;</c->n<c- p>&lt;/</c-><c- f>var</c-><c- p>&gt;&lt;/</c-><c- f>sup</c-><c- p>&gt;</c-></code></pre>
  </div>



  <h4 id=the-i-element><span class=secno>4.5.20</span> The <dfn data-dfn-type=element><code>i</code></dfn> element<a href=#the-i-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i title="The <i> HTML element represents a range of text that is set off from the normal text for some reason, such as idiomatic text, technical terms, taxonomical designations, among others. Historically, these have been presented using italicized type, which is the original source of the <i> naming of this element.">Element/i</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-i-element:concept-element-categories>Categories</a>:<dd><a id=the-i-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-i-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-i-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-i-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-i-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-i-element:concept-element-content-model>Content model</a>:<dd><a id=the-i-element:phrasing-content-2-3 href=dom.html#phrasing-content-2>Phrasing content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-i-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-i-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-i-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-i-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-i>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-i>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-i-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLElement</code>.</dl>

  <p>The <code id=the-i-element:the-i-element><a href=#the-i-element>i</a></code> element <a id=the-i-element:represents href=dom.html#represents>represents</a> a span of text in an alternate voice or
  mood, or otherwise offset from the normal prose in a manner indicating a different quality of
  text, such as a taxonomic designation, a technical term, an idiomatic phrase from another
  language, transliteration, a thought, or a ship name in Western texts.</p>

  <p>Terms in languages different from the main text should be annotated with <code id=the-i-element:attr-lang><a href=dom.html#attr-lang>lang</a></code> attributes (or, in XML, <a href=https://www.w3.org/TR/xml/#sec-lang-tag id=the-i-element:attr-xml-lang data-x-internal=attr-xml-lang><code>lang</code> attributes in the <span>XML namespace</span></a>).</p>

  <div class=example>
   <p>The examples below show uses of the <code id=the-i-element:the-i-element-2><a href=#the-i-element>i</a></code> element:</p>
   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The <c- p>&lt;</c-><c- f>i</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;taxonomy&quot;</c-><c- p>&gt;</c->Felis silvestris catus<c- p>&lt;/</c-><c- f>i</c-><c- p>&gt;</c-> is cute.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The term <c- p>&lt;</c-><c- f>i</c-><c- p>&gt;</c->prose content<c- p>&lt;/</c-><c- f>i</c-><c- p>&gt;</c-> is defined above.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->There is a certain <c- p>&lt;</c-><c- f>i</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;fr&quot;</c-><c- p>&gt;</c->je ne sais quoi<c- p>&lt;/</c-><c- f>i</c-><c- p>&gt;</c-> in the air.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>
   <p>In the following example, a dream sequence is marked up using
   <code id=the-i-element:the-i-element-3><a href=#the-i-element>i</a></code> elements.</p>
   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Raymond tried to sleep.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>i</c-><c- p>&gt;</c->The ship sailed away on Thursday<c- p>&lt;/</c-><c- f>i</c-><c- p>&gt;</c->, he
dreamt. <c- p>&lt;</c-><c- f>i</c-><c- p>&gt;</c->The ship had many people aboard, including a beautiful
princess called Carey. He watched her, day-in, day-out, hoping she
would notice him, but she never did.<c- p>&lt;/</c-><c- f>i</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>i</c-><c- p>&gt;</c->Finally one night he picked up the courage to speak with
her—<c- p>&lt;/</c-><c- f>i</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Raymond woke with a start as the fire alarm rang out.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>
  </div>

  <p>Authors can use the <code id=the-i-element:classes><a href=dom.html#classes>class</a></code> attribute on the <code id=the-i-element:the-i-element-4><a href=#the-i-element>i</a></code>
  element to identify why the element is being used, so that if the style of a particular use (e.g.
  dream sequences as opposed to taxonomic terms) is to be changed at a later date, the author
  doesn't have to go through the entire document (or series of related documents) annotating each
  use.</p>

  <p>Authors are encouraged to consider whether other elements might be more applicable than the
  <code id=the-i-element:the-i-element-5><a href=#the-i-element>i</a></code> element, for instance the <code id=the-i-element:the-em-element><a href=#the-em-element>em</a></code> element for marking up stress emphasis,
  or the <code id=the-i-element:the-dfn-element><a href=#the-dfn-element>dfn</a></code> element to mark up the defining instance of a term.</p>

  <p class=note>Style sheets can be used to format <code id=the-i-element:the-i-element-6><a href=#the-i-element>i</a></code> elements, just like any other
  element can be restyled. Thus, it is not the case that content in <code id=the-i-element:the-i-element-7><a href=#the-i-element>i</a></code> elements will
  necessarily be italicized.</p>


  <h4 id=the-b-element><span class=secno>4.5.21</span> The <dfn data-dfn-type=element><code>b</code></dfn> element<a href=#the-b-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b title="The <b> HTML element is used to draw the reader's attention to the element's contents, which are not otherwise granted special importance. This was formerly known as the Boldface element, and most browsers still draw the text in boldface. However, you should not use <b> for styling text or granting importance. If you wish to create boldface text, you should use the CSS font-weight property. If you wish to indicate an element is of special importance, you should use the <strong> element.">Element/b</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>4+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-b-element:concept-element-categories>Categories</a>:<dd><a id=the-b-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-b-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-b-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-b-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-b-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-b-element:concept-element-content-model>Content model</a>:<dd><a id=the-b-element:phrasing-content-2-3 href=dom.html#phrasing-content-2>Phrasing content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-b-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-b-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-b-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-b-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-b>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-b>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-b-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLElement</code>.</dl>

  <p>The <code id=the-b-element:the-b-element><a href=#the-b-element>b</a></code> element <a id=the-b-element:represents href=dom.html#represents>represents</a> a span of text to which attention is being
  drawn for utilitarian purposes without conveying any extra importance and with no implication of
  an alternate voice or mood, such as key words in a document abstract, product names in a review,
  actionable words in interactive text-driven software, or an article lede.</p>

  <div class=example>

   <p>The following example shows a use of the <code id=the-b-element:the-b-element-2><a href=#the-b-element>b</a></code> element to highlight key words without
   marking them up as important:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The <c- p>&lt;</c-><c- f>b</c-><c- p>&gt;</c->frobonitor<c- p>&lt;/</c-><c- f>b</c-><c- p>&gt;</c-> and <c- p>&lt;</c-><c- f>b</c-><c- p>&gt;</c->barbinator<c- p>&lt;/</c-><c- f>b</c-><c- p>&gt;</c-> components are fried.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>In the following example, objects in a text adventure are highlighted as being special by use
   of the <code id=the-b-element:the-b-element-3><a href=#the-b-element>b</a></code> element.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->You enter a small room. Your <c- p>&lt;</c-><c- f>b</c-><c- p>&gt;</c->sword<c- p>&lt;/</c-><c- f>b</c-><c- p>&gt;</c-> glows
brighter. A <c- p>&lt;</c-><c- f>b</c-><c- p>&gt;</c->rat<c- p>&lt;/</c-><c- f>b</c-><c- p>&gt;</c-> scurries past the corner wall.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>Another case where the <code id=the-b-element:the-b-element-4><a href=#the-b-element>b</a></code> element is appropriate is in marking up the lede (or
   lead) sentence or paragraph. The following example shows how a <a href=http://news.bbc.co.uk/2/hi/uk_news/scotland/north_east/7101506.stm>BBC article about
   kittens adopting a rabbit as their own</a> could be marked up:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>article</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h2</c-><c- p>&gt;</c->Kittens &apos;adopted&apos; by pet rabbit<c- p>&lt;/</c-><c- f>h2</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>b</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;lede&quot;</c-><c- p>&gt;</c->Six abandoned kittens have found an
 unexpected new mother figure — a pet rabbit.<c- p>&lt;/</c-><c- f>b</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Veterinary nurse Melanie Humble took the three-week-old
 kittens to her Aberdeen home.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<i>[...]</i></code></pre>

  </div>

  <p>As with the <code id=the-b-element:the-i-element><a href=#the-i-element>i</a></code> element, authors can use the <code id=the-b-element:classes><a href=dom.html#classes>class</a></code>
  attribute on the <code id=the-b-element:the-b-element-5><a href=#the-b-element>b</a></code> element to identify why the element is being used, so that if the
  style of a particular use is to be changed at a later date, the author doesn't have to go through
  annotating each use.</p>

  <p>The <code id=the-b-element:the-b-element-6><a href=#the-b-element>b</a></code> element should be used as a last resort when no other element is more
  appropriate. In particular, headings should use the <code id=the-b-element:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> to <code id=the-b-element:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-2><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> elements,
  stress emphasis should use the <code id=the-b-element:the-em-element><a href=#the-em-element>em</a></code> element, importance should be denoted with the
  <code id=the-b-element:the-strong-element><a href=#the-strong-element>strong</a></code> element, and text marked or highlighted should use the <code id=the-b-element:the-mark-element><a href=#the-mark-element>mark</a></code>
  element.</p>

  <div class=example>

   <p>The following would be <em>incorrect</em> usage:</p>

   <pre class=bad><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>b</c-><c- p>&gt;</c->WARNING!<c- p>&lt;/</c-><c- f>b</c-><c- p>&gt;</c-> Do not frob the barbinator!<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>In the previous example, the correct element to use would have been <code id=the-b-element:the-strong-element-2><a href=#the-strong-element>strong</a></code>, not
   <code id=the-b-element:the-b-element-7><a href=#the-b-element>b</a></code>.</p>

  </div>

  <p class=note>Style sheets can be used to format <code id=the-b-element:the-b-element-8><a href=#the-b-element>b</a></code> elements, just like any other
  element can be restyled. Thus, it is not the case that content in <code id=the-b-element:the-b-element-9><a href=#the-b-element>b</a></code> elements will
  necessarily be boldened.</p>



  <h4 id=the-u-element><span class=secno>4.5.22</span> The <dfn data-dfn-type=element><code>u</code></dfn> element<a href=#the-u-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u title="The <u> HTML element represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation. This is rendered by default as a simple solid underline, but may be altered using CSS.">Element/u</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>4+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-u-element:concept-element-categories>Categories</a>:<dd><a id=the-u-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-u-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-u-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-u-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-u-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-u-element:concept-element-content-model>Content model</a>:<dd><a id=the-u-element:phrasing-content-2-3 href=dom.html#phrasing-content-2>Phrasing content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-u-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-u-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-u-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-u-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-u>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-u>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-u-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLElement</code>.</dl>

  <p>The <code id=the-u-element:the-u-element><a href=#the-u-element>u</a></code> element <a id=the-u-element:represents href=dom.html#represents>represents</a> a span of text with an unarticulated, though
  explicitly rendered, non-textual annotation, such as labeling the text as being a proper name in
  Chinese text (a Chinese proper name mark), or labeling the text as being misspelt.</p>

  <p>In most cases, another element is likely to be more appropriate: for marking stress emphasis,
  the <code id=the-u-element:the-em-element><a href=#the-em-element>em</a></code> element should be used; for marking key words or phrases either the
  <code id=the-u-element:the-b-element><a href=#the-b-element>b</a></code> element or the <code id=the-u-element:the-mark-element><a href=#the-mark-element>mark</a></code> element should be used, depending on the context;
  for marking book titles, the <code id=the-u-element:the-cite-element><a href=#the-cite-element>cite</a></code> element should be used; for labeling text with explicit textual annotations, the
  <code id=the-u-element:the-ruby-element><a href=#the-ruby-element>ruby</a></code> element should be used; for technical terms, taxonomic designation,
  transliteration, a thought, or for labeling ship names in Western texts, the <code id=the-u-element:the-i-element><a href=#the-i-element>i</a></code>
  element should be used.</p>

  <p class=note>The default rendering of the <code id=the-u-element:the-u-element-2><a href=#the-u-element>u</a></code> element in visual presentations
  clashes with the conventional rendering of hyperlinks (underlining). Authors are encouraged to
  avoid using the <code id=the-u-element:the-u-element-3><a href=#the-u-element>u</a></code> element where it could be confused for a hyperlink.</p>

  <div class=example>

   <p>In this example, a <code id=the-u-element:the-u-element-4><a href=#the-u-element>u</a></code> element is used to mark a word as misspelt:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The <c- p>&lt;</c-><c- f>u</c-><c- p>&gt;</c->see<c- p>&lt;/</c-><c- f>u</c-><c- p>&gt;</c-> is full of fish.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>



  <h4 id=the-mark-element><span class=secno>4.5.23</span> The <dfn data-dfn-type=element><code>mark</code></dfn> element<a href=#the-mark-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark title="The <mark> HTML element represents text which is marked or highlighted for reference or notation purposes due to the marked passage's relevance in the enclosing context.">Element/mark</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5.1+</span></span><span class="chrome yes"><span>Chrome</span><span>7+</span></span><hr><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-mark-element:concept-element-categories>Categories</a>:<dd><a id=the-mark-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-mark-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-mark-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-mark-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-mark-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-mark-element:concept-element-content-model>Content model</a>:<dd><a id=the-mark-element:phrasing-content-2-3 href=dom.html#phrasing-content-2>Phrasing content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-mark-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-mark-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-mark-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-mark-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-mark>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-mark>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-mark-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLElement</code>.</dl>

  

  <p>The <code id=the-mark-element:the-mark-element><a href=#the-mark-element>mark</a></code> element <a id=the-mark-element:represents href=dom.html#represents>represents</a> a run of text in one document marked or
  highlighted for <a href=dom.html#referenced id=the-mark-element:referenced>reference</a> purposes, due to its relevance in
  another context. When used in a quotation or other block of text referred to from the prose, it
  indicates a highlight that was not originally present but which has been added to bring the
  reader's attention to a part of the text that might not have been considered important by the
  original author when the block was originally written, but which is now under previously
  unexpected scrutiny. When used in the main prose of a document, it indicates a part of the
  document that has been highlighted due to its likely relevance to the user's current activity.</p>

  <div class=example>

   <p>This example shows how the <code id=the-mark-element:the-mark-element-2><a href=#the-mark-element>mark</a></code> element can be used to bring attention to a
   particular part of a quotation:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en-US&quot;</c-><c- p>&gt;</c->Consider the following quote:<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<span lang='en-GB'><c- p>&lt;</c-><c- f>blockquote</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en-GB&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Look around and you will find, no-one&apos;s really
 <c- p>&lt;</c-><c- f>mark</c-><c- p>&gt;</c->colour<c- p>&lt;/</c-><c- f>mark</c-><c- p>&gt;</c-> blind.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>blockquote</c-><c- p>&gt;</c-></span>
<c- p>&lt;</c-><c- f>p</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en-US&quot;</c-><c- p>&gt;</c->As we can tell from the <c- p>&lt;</c-><c- f>em</c-><c- p>&gt;</c->spelling<c- p>&lt;/</c-><c- f>em</c-><c- p>&gt;</c-> of the word,
the person writing this quote is clearly not American.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>(If the goal was to mark the element as misspelt, however, the <code id=the-mark-element:the-u-element><a href=#the-u-element>u</a></code> element,
   possibly with a class, would be more appropriate.)</p>

  </div>

  <div class=example>

   <p>Another example of the <code id=the-mark-element:the-mark-element-3><a href=#the-mark-element>mark</a></code> element is highlighting parts of a document that are
   matching some search string. If someone looked at a document, and the server knew that the user
   was searching for the word "kitten", then the server might return the document with one paragraph
   modified as follows:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->I also have some <c- p>&lt;</c-><c- f>mark</c-><c- p>&gt;</c->kitten<c- p>&lt;/</c-><c- f>mark</c-><c- p>&gt;</c->s who are visiting me
these days. They&apos;re really cute. I think they like my garden! Maybe I
should adopt a <c- p>&lt;</c-><c- f>mark</c-><c- p>&gt;</c->kitten<c- p>&lt;/</c-><c- f>mark</c-><c- p>&gt;</c->.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>In the following snippet, a paragraph of text refers to a specific part of a code
   fragment.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The highlighted part below is where the error lies:<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>pre</c-><c- p>&gt;&lt;</c-><c- f>code</c-><c- p>&gt;</c->var i: Integer;
begin
   i := <c- p>&lt;</c-><c- f>mark</c-><c- p>&gt;</c->1.1<c- p>&lt;/</c-><c- f>mark</c-><c- p>&gt;</c->;
end.<c- p>&lt;/</c-><c- f>code</c-><c- p>&gt;&lt;/</c-><c- f>pre</c-><c- p>&gt;</c-></code></pre>

   <p>This is separate from <em>syntax highlighting</em>, for which <code id=the-mark-element:the-span-element><a href=#the-span-element>span</a></code> is more
   appropriate. Combining both, one would get:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The highlighted part below is where the error lies:<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>pre</c-><c- p>&gt;&lt;</c-><c- f>code</c-><c- p>&gt;&lt;</c-><c- f>span</c-> <c- e>class</c-><c- o>=</c-><c- s>keyword</c-><c- p>&gt;</c->var<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>span</c-> <c- e>class</c-><c- o>=</c-><c- s>ident</c-><c- p>&gt;</c->i<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c->: <c- p>&lt;</c-><c- f>span</c-> <c- e>class</c-><c- o>=</c-><c- s>type</c-><c- p>&gt;</c->Integer<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c->;
<c- p>&lt;</c-><c- f>span</c-> <c- e>class</c-><c- o>=</c-><c- s>keyword</c-><c- p>&gt;</c->begin<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>span</c-> <c- e>class</c-><c- o>=</c-><c- s>ident</c-><c- p>&gt;</c->i<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c-> := <c- p>&lt;</c-><c- f>span</c-> <c- e>class</c-><c- o>=</c-><c- s>literal</c-><c- p>&gt;&lt;</c-><c- f>mark</c-><c- p>&gt;</c->1.1<c- p>&lt;/</c-><c- f>mark</c-><c- p>&gt;&lt;/</c-><c- f>span</c-><c- p>&gt;</c->;
<c- p>&lt;</c-><c- f>span</c-> <c- e>class</c-><c- o>=</c-><c- s>keyword</c-><c- p>&gt;</c->end<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c->.<c- p>&lt;/</c-><c- f>code</c-><c- p>&gt;&lt;/</c-><c- f>pre</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>This is another example showing the use of <code id=the-mark-element:the-mark-element-4><a href=#the-mark-element>mark</a></code> to highlight a part of quoted
   text that was originally not emphasized. In this example, common typographic conventions have led
   the author to explicitly style <code id=the-mark-element:the-mark-element-5><a href=#the-mark-element>mark</a></code> elements in quotes to render in italics.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>style</c-><c- p>&gt;</c->
 <c- f>blockquote</c-> <c- f>mark</c-><c- o>,</c-> <c- f>q</c-> <c- f>mark</c-> <c- p>{</c->
   <c- k>font</c-><c- p>:</c-> <c- kc>inherit</c-><c- p>;</c-> <c- k>font-style</c-><c- p>:</c-> <c- kc>italic</c-><c- p>;</c->
   <c- k>text-decoration</c-><c- p>:</c-> <c- kc>none</c-><c- p>;</c->
   <c- k>background</c-><c- p>:</c-> <c- kc>transparent</c-><c- p>;</c-> <c- k>color</c-><c- p>:</c-> <c- kc>inherit</c-><c- p>;</c->
 <c- p>}</c->
 <c- p>.</c-><c- nc>bubble</c-> <c- f>em</c-> <c- p>{</c->
   <c- k>font</c-><c- p>:</c-> <c- kc>inherit</c-><c- p>;</c-> <c- k>font-size</c-><c- p>:</c-> <c- kc>larger</c-><c- p>;</c->
   <c- k>text-decoration</c-><c- p>:</c-> <c- kc>underline</c-><c- p>;</c->
 <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>article</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->She knew<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Did you notice the subtle joke in the joke on panel 4?<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>blockquote</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;bubble&quot;</c-><c- p>&gt;</c->I didn&apos;t <c- p>&lt;</c-><c- f>em</c-><c- p>&gt;</c->want<c- p>&lt;/</c-><c- f>em</c-><c- p>&gt;</c-> to believe. <c- p>&lt;</c-><c- f>mark</c-><c- p>&gt;</c->Of course
  on some level I realized it was a known-plaintext attack.<c- p>&lt;/</c-><c- f>mark</c-><c- p>&gt;</c-> But I
  couldn&apos;t admit it until I saw for myself.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>blockquote</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->(Emphasis mine.) I thought that was great. It&apos;s so pedantic, yet it
 explains everything neatly.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>article</c-><c- p>&gt;</c-></code></pre>

   <p>Note, incidentally, the distinction between the <code id=the-mark-element:the-em-element><a href=#the-em-element>em</a></code> element in this example, which
   is part of the original text being quoted, and the <code id=the-mark-element:the-mark-element-6><a href=#the-mark-element>mark</a></code> element, which is
   highlighting a part for comment.</p>

  </div>

  <div class=example>

   <p>The following example shows the difference between denoting the <em>importance</em> of a span
   of text (<code id=the-mark-element:the-strong-element><a href=#the-strong-element>strong</a></code>) as opposed to denoting the <em>relevance</em> of a span of text
   (<code id=the-mark-element:the-mark-element-7><a href=#the-mark-element>mark</a></code>). It is an extract from a textbook, where the extract has had the parts
   relevant to the exam highlighted. The safety warnings, important though they may be, are
   apparently not relevant to the exam.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>h3</c-><c- p>&gt;</c->Wormhole Physics Introduction<c- p>&lt;/</c-><c- f>h3</c-><c- p>&gt;</c->

<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>mark</c-><c- p>&gt;</c->A wormhole in normal conditions can be held open for a
maximum of just under 39 minutes.<c- p>&lt;/</c-><c- f>mark</c-><c- p>&gt;</c-> Conditions that can increase
the time include a powerful energy source coupled to one or both of
the gates connecting the wormhole, and a large gravity well (such as a
black hole).<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->

<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>mark</c-><c- p>&gt;</c->Momentum is preserved across the wormhole. Electromagnetic
radiation can travel in both directions through a wormhole,
but matter cannot.<c- p>&lt;/</c-><c- f>mark</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->

<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->When a wormhole is created, a vortex normally forms.
<c- p>&lt;</c-><c- f>strong</c-><c- p>&gt;</c->Warning: The vortex caused by the wormhole opening will
annihilate anything in its path.<c- p>&lt;/</c-><c- f>strong</c-><c- p>&gt;</c-> Vortexes can be avoided when
using sufficiently advanced dialing technology.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->

<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>mark</c-><c- p>&gt;</c->An obstruction in a gate will prevent it from accepting a
wormhole connection.<c- p>&lt;/</c-><c- f>mark</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>


  <h4 id=the-bdi-element><span class=secno>4.5.24</span> The <dfn data-dfn-type=element><code>bdi</code></dfn> element<a href=#the-bdi-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/bdi title="The <bdi> HTML element tells the browser's bidirectional algorithm to treat the text it contains in isolation from its surrounding text. It's particularly useful when a website dynamically inserts some text and doesn't know the directionality of the text being inserted.">Element/bdi</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>10+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>16+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-bdi-element:concept-element-categories>Categories</a>:<dd><a id=the-bdi-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-bdi-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-bdi-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-bdi-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-bdi-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-bdi-element:concept-element-content-model>Content model</a>:<dd><a id=the-bdi-element:phrasing-content-2-3 href=dom.html#phrasing-content-2>Phrasing content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-bdi-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-bdi-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-bdi-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd>Also, the <code id=the-bdi-element:attr-dir><a href=dom.html#attr-dir>dir</a></code> global attribute has special semantics on this element.<dt><a href=dom.html#concept-element-accessibility-considerations id=the-bdi-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-bdi>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-bdi>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-bdi-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLElement</code>.</dl>

  <p>The <code id=the-bdi-element:the-bdi-element><a href=#the-bdi-element>bdi</a></code> element <a id=the-bdi-element:represents href=dom.html#represents>represents</a> a span of text that is to be isolated from
  its surroundings for the purposes of bidirectional text formatting. <a href=references.html#refsBIDI>[BIDI]</a></p>

  <p class=note>The <code id=the-bdi-element:attr-dir-2><a href=dom.html#attr-dir>dir</a></code> global attribute defaults to <code id=the-bdi-element:attr-dir-auto><a href=dom.html#attr-dir-auto>auto</a></code> on this element (it never inherits from the parent element like
  with other elements).</p>

  

  <div class=example>

   <p>This element is especially useful when embedding user-generated content with an unknown
   directionality.</p>

   <p>In this example, usernames are shown along with the number of posts that the user has
   submitted. If the <code id=the-bdi-element:the-bdi-element-2><a href=#the-bdi-element>bdi</a></code> element were not used, the username of the Arabic user would
   end up confusing the text (the bidirectional algorithm would put the colon and the number "3"
   next to the word "User" rather than next to the word "posts").</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>ul</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->User <c- p>&lt;</c-><c- f>bdi</c-><c- p>&gt;</c->jcranmer<c- p>&lt;/</c-><c- f>bdi</c-><c- p>&gt;</c->: 12 posts.
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->User <c- p>&lt;</c-><c- f>bdi</c-><c- p>&gt;</c->hober<c- p>&lt;/</c-><c- f>bdi</c-><c- p>&gt;</c->: 5 posts.
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->User <c- p>&lt;</c-><c- f>bdi</c-><c- p>&gt;</c-><bdo dir='rtl'>إيان</bdo><c- p>&lt;/</c-><c- f>bdi</c-><c- p>&gt;</c->: 3 posts.
<c- p>&lt;/</c-><c- f>ul</c-><c- p>&gt;</c-></code></pre>

   <figure>
    <img src=../images/sample-bdi.png alt="">
    <figcaption>When using the <code id=the-bdi-element:the-bdi-element-3><a href=#the-bdi-element>bdi</a></code> element, the username acts as expected.</figcaption>
   </figure>

   <figure>
    <img src=../images/sample-not-bdi.png alt="">
    <figcaption>If the <code id=the-bdi-element:the-bdi-element-4><a href=#the-bdi-element>bdi</a></code> element were to be replaced by a <code id=the-bdi-element:the-b-element><a href=#the-b-element>b</a></code> element, the username would confuse the bidirectional algorithm and the third bullet would end up saying "User 3 :", followed by the Arabic name (right-to-left), followed by "posts" and a period.</figcaption>
   </figure>

  </div>


  <h4 id=the-bdo-element><span class=secno>4.5.25</span> The <dfn data-dfn-type=element><code>bdo</code></dfn> element<a href=#the-bdo-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/bdo title="The <bdo> HTML element overrides the current directionality of text, so that the text within is rendered in a different direction.">Element/bdo</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>10+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>15+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-bdo-element:concept-element-categories>Categories</a>:<dd><a id=the-bdo-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-bdo-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-bdo-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-bdo-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-bdo-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-bdo-element:concept-element-content-model>Content model</a>:<dd><a id=the-bdo-element:phrasing-content-2-3 href=dom.html#phrasing-content-2>Phrasing content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-bdo-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-bdo-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-bdo-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd>Also, the <code id=the-bdo-element:attr-dir><a href=dom.html#attr-dir>dir</a></code> global attribute has special semantics on this element.<dt><a href=dom.html#concept-element-accessibility-considerations id=the-bdo-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-bdo>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-bdo>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-bdo-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLElement</code>.</dl>

  <p>The <code id=the-bdo-element:the-bdo-element><a href=#the-bdo-element>bdo</a></code> element <a id=the-bdo-element:represents href=dom.html#represents>represents</a> explicit text directionality formatting
  control for its children. It allows authors to override the Unicode bidirectional algorithm by
  explicitly specifying a direction override. <a href=references.html#refsBIDI>[BIDI]</a></p>

  <p>Authors must specify the <code id=the-bdo-element:attr-dir-2><a href=dom.html#attr-dir>dir</a></code> attribute on this element, with the
  value <code id=the-bdo-element:attr-dir-ltr><a href=dom.html#attr-dir-ltr>ltr</a></code> to specify a left-to-right override and with the value <code id=the-bdo-element:attr-dir-rtl><a href=dom.html#attr-dir-rtl>rtl</a></code> to
  specify a right-to-left override. The <code id=the-bdo-element:attr-dir-auto><a href=dom.html#attr-dir-auto>auto</a></code> value must not be specified.</p>

  



  <h4 id=the-span-element><span class=secno>4.5.26</span> The <dfn data-dfn-type=element><code>span</code></dfn> element<a href=#the-span-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span title="The <span> HTML element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element is appropriate. <span> is very much like a <div> element, but <div> is a block-level element whereas a <span> is an inline-level element.">Element/span</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-span-element:concept-element-categories>Categories</a>:<dd><a id=the-span-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-span-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-span-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-span-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-span-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-span-element:concept-element-content-model>Content model</a>:<dd>If the element is a descendant of an <code id=the-span-element:the-option-element><a href=form-elements.html#the-option-element>option</a></code> element: Zero or more
   <a id=the-span-element:option-element-inner-content-elements-2 href=dom.html#option-element-inner-content-elements-2><code>option</code> element inner content elements</a>, except <code id=the-span-element:the-div-element><a href=grouping-content.html#the-div-element>div</a></code>
   elements.<dd>Otherwise: <a id=the-span-element:phrasing-content-2-3 href=dom.html#phrasing-content-2>Phrasing content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-span-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-span-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-span-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-span-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-span>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-span>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-span-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLSpanElement</code>.</dl>

  <p>The <code id=the-span-element:the-span-element><a href=#the-span-element>span</a></code> element doesn't mean anything on its own, but can be useful when used
  together with the <a id=the-span-element:global-attributes-2 href=dom.html#global-attributes>global attributes</a>, e.g. <code id=the-span-element:classes><a href=dom.html#classes>class</a></code>,
  <code id=the-span-element:attr-lang><a href=dom.html#attr-lang>lang</a></code>, or <code id=the-span-element:attr-dir><a href=dom.html#attr-dir>dir</a></code>. It
  <a id=the-span-element:represents href=dom.html#represents>represents</a> its children.</p>

  <div class=example>

   <p>In this example, a code fragment is marked up using <code id=the-span-element:the-span-element-2><a href=#the-span-element>span</a></code> elements and <code id=the-span-element:classes-2><a href=dom.html#classes>class</a></code> attributes so that its keywords and identifiers can be
   color-coded from CSS:</p>

   

   <pre><code class='html'><c- p>&lt;</c-><c- f>pre</c-><c- p>&gt;&lt;</c-><c- f>code</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;lang-c&quot;</c-><c- p>&gt;&lt;</c-><c- f>span</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;keyword&quot;</c-><c- p>&gt;</c->for<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c-> (<c- p>&lt;</c-><c- f>span</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;ident&quot;</c-><c- p>&gt;</c->j<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c-> = 0; <c- p>&lt;</c-><c- f>span</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;ident&quot;</c-><c- p>&gt;</c->j<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c-> <c- ni>&amp;lt;</c-> 256; <c- p>&lt;</c-><c- f>span</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;ident&quot;</c-><c- p>&gt;</c->j<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c->++) {
  <c- p>&lt;</c-><c- f>span</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;ident&quot;</c-><c- p>&gt;</c->i_t3<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c-> = (<c- p>&lt;</c-><c- f>span</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;ident&quot;</c-><c- p>&gt;</c->i_t3<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c-> &amp; 0x1ffff) | (<c- p>&lt;</c-><c- f>span</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;ident&quot;</c-><c- p>&gt;</c->j<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c-> <c- ni>&amp;lt;&amp;lt;</c-> 17);
  <c- p>&lt;</c-><c- f>span</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;ident&quot;</c-><c- p>&gt;</c->i_t6<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c-> = (((((((<c- p>&lt;</c-><c- f>span</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;ident&quot;</c-><c- p>&gt;</c->i_t3<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c-> &gt;&gt; 3) ^ <c- p>&lt;</c-><c- f>span</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;ident&quot;</c-><c- p>&gt;</c->i_t3<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c->) &gt;&gt; 1) ^ <c- p>&lt;</c-><c- f>span</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;ident&quot;</c-><c- p>&gt;</c->i_t3<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c->) &gt;&gt; 8) ^ <c- p>&lt;</c-><c- f>span</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;ident&quot;</c-><c- p>&gt;</c->i_t3<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c->) &gt;&gt; 5) &amp; 0xff;
  <c- p>&lt;</c-><c- f>span</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;keyword&quot;</c-><c- p>&gt;</c->if<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c-> (<c- p>&lt;</c-><c- f>span</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;ident&quot;</c-><c- p>&gt;</c->i_t6<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c-> == <c- p>&lt;</c-><c- f>span</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;ident&quot;</c-><c- p>&gt;</c->i_t1<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c->)
    <c- p>&lt;</c-><c- f>span</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;keyword&quot;</c-><c- p>&gt;</c->break<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c->;
}<c- p>&lt;/</c-><c- f>code</c-><c- p>&gt;&lt;/</c-><c- f>pre</c-><c- p>&gt;</c-></code></pre>

  </div>



  <h4 id=the-br-element><span class=secno>4.5.27</span> The <dfn data-dfn-type=element><code>br</code></dfn> element<a href=#the-br-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br title="The <br> HTML element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.">Element/br</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-br-element:concept-element-categories>Categories</a>:<dd><a id=the-br-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-br-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dt><a href=dom.html#concept-element-contexts id=the-br-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-br-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-br-element:concept-element-content-model>Content model</a>:<dd><a href=dom.html#concept-content-nothing id=the-br-element:concept-content-nothing>Nothing</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-br-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>No <a href=syntax.html#syntax-end-tag id=the-br-element:syntax-end-tag>end tag</a>.<dt><a href=dom.html#concept-element-attributes id=the-br-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-br-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-br-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-br>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-br>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-br-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLBRElement</code>.</dl>

  <p>The <code id=the-br-element:the-br-element><a href=#the-br-element>br</a></code> element <a id=the-br-element:represents href=dom.html#represents>represents</a> a line break.</p>

  <p class=note>While line breaks are usually represented in visual media by physically moving
  subsequent text to a new line, a style sheet or user agent would be equally justified in causing
  line breaks to be rendered in a different manner, for instance as green dots, or as extra
  spacing.</p>

  <p><code id=the-br-element:the-br-element-2><a href=#the-br-element>br</a></code> elements must be used only for line breaks that are actually part of the
  content, as in poems or addresses.</p>

  <div class=example>

  <p>The following example is correct usage of the <code id=the-br-element:the-br-element-3><a href=#the-br-element>br</a></code> element:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->P. Sherman<c- p>&lt;</c-><c- f>br</c-><c- p>&gt;</c->
42 Wallaby Way<c- p>&lt;</c-><c- f>br</c-><c- p>&gt;</c->
Sydney<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>

  <p><code id=the-br-element:the-br-element-4><a href=#the-br-element>br</a></code> elements must not be used for separating thematic groups in a paragraph.</p>

  <div class=example>

   <p>The following examples are non-conforming, as they abuse the <code id=the-br-element:the-br-element-5><a href=#the-br-element>br</a></code> element:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>a</c-> ...<c- p>&gt;</c->34 comments.<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;</c-><c- f>br</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>a</c-> ...<c- p>&gt;</c->Add a comment.<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Name: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;name&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;</c-><c- f>br</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->Address: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;address&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>Here are alternatives to the above, which are correct:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>a</c-> ...<c- p>&gt;</c->34 comments.<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>a</c-> ...<c- p>&gt;</c->Add a comment.<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Name: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;name&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Address: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;address&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>

  <p>If a <a id=the-br-element:paragraph href=dom.html#paragraph>paragraph</a> consists of nothing but a single <code id=the-br-element:the-br-element-6><a href=#the-br-element>br</a></code> element, it
  represents a placeholder blank line (e.g. as in a template). Such blank lines must not be used for
  presentation purposes.</p>

  


  <h4 id=the-wbr-element><span class=secno>4.5.28</span> The <dfn data-dfn-type=element><code>wbr</code></dfn> element<a href=#the-wbr-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr title="The <wbr> HTML element represents a word break opportunity—a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.">Element/wbr</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>11.6+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>5.5–7</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12+</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-wbr-element:concept-element-categories>Categories</a>:<dd><a id=the-wbr-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-wbr-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dt><a href=dom.html#concept-element-contexts id=the-wbr-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-wbr-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-wbr-element:concept-element-content-model>Content model</a>:<dd><a href=dom.html#concept-content-nothing id=the-wbr-element:concept-content-nothing>Nothing</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-wbr-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>No <a href=syntax.html#syntax-end-tag id=the-wbr-element:syntax-end-tag>end tag</a>.<dt><a href=dom.html#concept-element-attributes id=the-wbr-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-wbr-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-wbr-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-wbr>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-wbr>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-wbr-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLElement</code>.</dl>

  <p>The <code id=the-wbr-element:the-wbr-element><a href=#the-wbr-element>wbr</a></code> element <a id=the-wbr-element:represents href=dom.html#represents>represents</a> a line break opportunity.</p>

  <div class=example>

   <p>In the following example, someone is quoted as saying something which, for effect, is written
   as one long word. However, to ensure that the text can be wrapped in a readable fashion, the
   individual words in the quote are separated using a <code id=the-wbr-element:the-wbr-element-2><a href=#the-wbr-element>wbr</a></code> element.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->So then she pointed at the tiger and screamed
&quot;there<c- p>&lt;</c-><c- f>wbr</c-><c- p>&gt;</c->is<c- p>&lt;</c-><c- f>wbr</c-><c- p>&gt;</c->no<c- p>&lt;</c-><c- f>wbr</c-><c- p>&gt;</c->way<c- p>&lt;</c-><c- f>wbr</c-><c- p>&gt;</c->you<c- p>&lt;</c-><c- f>wbr</c-><c- p>&gt;</c->are<c- p>&lt;</c-><c- f>wbr</c-><c- p>&gt;</c->ever<c- p>&lt;</c-><c- f>wbr</c-><c- p>&gt;</c->going<c- p>&lt;</c-><c- f>wbr</c-><c- p>&gt;</c->to<c- p>&lt;</c-><c- f>wbr</c-><c- p>&gt;</c->catch<c- p>&lt;</c-><c- f>wbr</c-><c- p>&gt;</c->me&quot;!<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>

  



  <h4 id=usage-summary><span class=secno>4.5.29</span> Usage summary<a href=#usage-summary class=self-link></a></h4>

  

  <table><thead><tr><th>Element
     <th>Purpose
     <th>Example
   <tbody><tr><td><code id=usage-summary:the-a-element><a href=#the-a-element>a</a></code>
     <td>Hyperlinks
     <td><pre class=example><code class='html'>Visit my <strong><c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;drinks.html&quot;</c-><c- p>&gt;</c->drinks<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-></strong> page.</code></pre>

    <tr><td><code id=usage-summary:the-em-element><a href=#the-em-element>em</a></code>
     <td>Stress emphasis
     <td><pre class=example><code class='html'>I must say I <strong><c- p>&lt;</c-><c- f>em</c-><c- p>&gt;</c->adore<c- p>&lt;/</c-><c- f>em</c-><c- p>&gt;</c-></strong> lemonade.</code></pre>

    <tr><td><code id=usage-summary:the-strong-element><a href=#the-strong-element>strong</a></code>
     <td>Importance
     <td><pre class=example><code class='html'>This tea is <strong><c- p>&lt;</c-><c- f>strong</c-><c- p>&gt;</c->very hot<c- p>&lt;/</c-><c- f>strong</c-><c- p>&gt;</c-></strong>.</code></pre>

    <tr><td><code id=usage-summary:the-small-element><a href=#the-small-element>small</a></code>
     <td>Side comments
     <td><pre class=example><code class='html'>These grapes are made into wine. <strong><c- p>&lt;</c-><c- f>small</c-><c- p>&gt;</c->Alcohol is addictive.<c- p>&lt;/</c-><c- f>small</c-><c- p>&gt;</c-></strong></code></pre>

    <tr><td><code id=usage-summary:the-s-element><a href=#the-s-element>s</a></code>
     <td>Inaccurate text
     <td><pre class=example><code class='html'>Price: <strong><c- p>&lt;</c-><c- f>s</c-><c- p>&gt;</c->£4.50<c- p>&lt;/</c-><c- f>s</c-><c- p>&gt;</c-></strong> £2.00!</code></pre>

    <tr><td><code id=usage-summary:the-cite-element><a href=#the-cite-element>cite</a></code>
     <td>Titles of works
     <td><pre class=example><code class='html'>The case <strong><c- p>&lt;</c-><c- f>cite</c-><c- p>&gt;</c->Hugo v. Danielle<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c-></strong> is relevant here.</code></pre>

    <tr><td><code id=usage-summary:the-q-element><a href=#the-q-element>q</a></code>
     <td>Quotations
     <td><pre class=example><code class='html'>The judge said <strong><c- p>&lt;</c-><c- f>q</c-><c- p>&gt;</c->You can drink water from the fish tank<c- p>&lt;/</c-><c- f>q</c-><c- p>&gt;</c-></strong> but advised against it.</code></pre>

    <tr><td><code id=usage-summary:the-dfn-element><a href=#the-dfn-element>dfn</a></code>
     <td>Defining instance
     <td><pre class=example><code class='html'>The term <strong><c- p>&lt;</c-><c- f>dfn</c-><c- p>&gt;</c->organic food<c- p>&lt;/</c-><c- f>dfn</c-><c- p>&gt;</c-></strong> refers to food produced without synthetic chemicals.</code></pre>

    <tr><td><code id=usage-summary:the-abbr-element><a href=#the-abbr-element>abbr</a></code>
     <td>Abbreviations
     <td><pre class=example><code class='html'>Organic food in Ireland is certified by the <strong><c- p>&lt;</c-><c- f>abbr</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;Irish Organic Farmers and Growers Association&quot;</c-><c- p>&gt;</c->IOFGA<c- p>&lt;/</c-><c- f>abbr</c-><c- p>&gt;</c-></strong>.</code></pre>

    <tr><td><code id=usage-summary:the-ruby-element><a href=#the-ruby-element>ruby</a></code>, <code id=usage-summary:the-rt-element><a href=#the-rt-element>rt</a></code>, <code id=usage-summary:the-rp-element><a href=#the-rp-element>rp</a></code>
     <td>Ruby annotations
     <td><pre class=example><code class='html'><strong><c- p>&lt;</c-><c- f>ruby</c-><c- p>&gt;</c-> OJ <c- p>&lt;</c-><c- f>rp</c-><c- p>&gt;</c->(<c- p>&lt;</c-><c- f>rt</c-><c- p>&gt;</c->Orange Juice<c- p>&lt;</c-><c- f>rp</c-><c- p>&gt;</c->)<c- p>&lt;/</c-><c- f>ruby</c-><c- p>&gt;</c-></strong></code></pre>

    <tr><td><code id=usage-summary:the-data-element><a href=#the-data-element>data</a></code>
     <td>Machine-readable equivalent
     <td><pre class=example><code class='html'>Available starting today! <strong><c- p>&lt;</c-><c- f>data</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;UPC:022014640201&quot;</c-><c- p>&gt;</c->North Coast Organic Apple Cider<c- p>&lt;/</c-><c- f>data</c-><c- p>&gt;</c-></strong></code></pre>

    <tr><td><code id=usage-summary:the-time-element><a href=#the-time-element>time</a></code>
     <td>Machine-readable equivalent of date- or time-related data
     <td><pre class=example><code class='html'>Available starting on <strong><c- p>&lt;</c-><c- f>time</c-> <c- e>datetime</c-><c- o>=</c-><c- s>&quot;2011-11-18&quot;</c-><c- p>&gt;</c->November 18th<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;</c-></strong>!</code></pre>

    <tr><td><code id=usage-summary:the-code-element><a href=#the-code-element>code</a></code>
     <td>Computer code
     <td><pre class=example><code class='html'>The <strong><c- p>&lt;</c-><c- f>code</c-><c- p>&gt;</c->fruitdb<c- p>&lt;/</c-><c- f>code</c-><c- p>&gt;</c-></strong> program can be used for tracking fruit production.</code></pre>

    <tr><td><code id=usage-summary:the-var-element><a href=#the-var-element>var</a></code>
     <td>Variables
     <td><pre class=example><code class='html'>If there are <strong><c- p>&lt;</c-><c- f>var</c-><c- p>&gt;</c->n<c- p>&lt;/</c-><c- f>var</c-><c- p>&gt;</c-></strong> fruit in the bowl, at least <strong><c- p>&lt;</c-><c- f>var</c-><c- p>&gt;</c->n<c- p>&lt;/</c-><c- f>var</c-><c- p>&gt;</c-></strong>÷2 will be ripe.</code></pre>

    <tr><td><code id=usage-summary:the-samp-element><a href=#the-samp-element>samp</a></code>
     <td>Computer output
     <td><pre class=example><code class='html'>The computer said <strong><c- p>&lt;</c-><c- f>samp</c-><c- p>&gt;</c->Unknown error -3<c- p>&lt;/</c-><c- f>samp</c-><c- p>&gt;</c-></strong>.</code></pre>

    <tr><td><code id=usage-summary:the-kbd-element><a href=#the-kbd-element>kbd</a></code>
     <td>User input
     <td><pre class=example><code class='html'>Hit <strong><c- p>&lt;</c-><c- f>kbd</c-><c- p>&gt;</c->F1<c- p>&lt;/</c-><c- f>kbd</c-><c- p>&gt;</c-></strong> to continue.</code></pre>

    <tr><td><code id=usage-summary:the-sub-and-sup-elements><a href=#the-sub-and-sup-elements>sub</a></code>
     <td>Subscripts
     <td><pre class=example><code class='html'>Water is H<strong><c- p>&lt;</c-><c- f>sub</c-><c- p>&gt;</c->2<c- p>&lt;/</c-><c- f>sub</c-><c- p>&gt;</c-></strong>O.</code></pre>

    <tr><td><code id=usage-summary:the-sub-and-sup-elements-2><a href=#the-sub-and-sup-elements>sup</a></code>
     <td>Superscripts
     <td><pre class=example><code class='html'>The Hydrogen in heavy water is usually <strong><c- p>&lt;</c-><c- f>sup</c-><c- p>&gt;</c->2<c- p>&lt;/</c-><c- f>sup</c-><c- p>&gt;</c-></strong>H.</code></pre>

    <tr><td><code id=usage-summary:the-i-element><a href=#the-i-element>i</a></code>
     <td>Alternative voice
     <td><pre class=example><code class='html'>Lemonade consists primarily of <strong><c- p>&lt;</c-><c- f>i</c-><c- p>&gt;</c->Citrus limon<c- p>&lt;/</c-><c- f>i</c-><c- p>&gt;</c-></strong>.</code></pre>

    <tr><td><code id=usage-summary:the-b-element><a href=#the-b-element>b</a></code>
     <td>Keywords
     <td><pre class=example><code class='html'>Take a <strong><c- p>&lt;</c-><c- f>b</c-><c- p>&gt;</c->lemon<c- p>&lt;/</c-><c- f>b</c-><c- p>&gt;</c-></strong> and squeeze it with a <strong><c- p>&lt;</c-><c- f>b</c-><c- p>&gt;</c->juicer<c- p>&lt;/</c-><c- f>b</c-><c- p>&gt;</c-></strong>.</code></pre>

    <tr><td><code id=usage-summary:the-u-element><a href=#the-u-element>u</a></code>
     <td>Annotations
     <td><pre class=example><code class='html'>The mixture of apple juice and <strong><c- p>&lt;</c-><c- f>u</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;spelling&quot;</c-><c- p>&gt;</c->eldeflower<c- p>&lt;/</c-><c- f>u</c-><c- p>&gt;</c-></strong> juice is very pleasant.</code></pre>

    <tr><td><code id=usage-summary:the-mark-element><a href=#the-mark-element>mark</a></code>
     <td>Highlight
     <td><pre class=example><code class='html'>Elderflower cordial, with one <strong><c- p>&lt;</c-><c- f>mark</c-><c- p>&gt;</c->part<c- p>&lt;/</c-><c- f>mark</c-><c- p>&gt;</c-></strong> cordial to ten <strong><c- p>&lt;</c-><c- f>mark</c-><c- p>&gt;</c->part<c- p>&lt;/</c-><c- f>mark</c-><c- p>&gt;</c-></strong>s water, stands a<strong><c- p>&lt;</c-><c- f>mark</c-><c- p>&gt;</c->part<c- p>&lt;/</c-><c- f>mark</c-><c- p>&gt;</c-></strong> from the rest.</code></pre>

    <tr><td><code id=usage-summary:the-bdi-element><a href=#the-bdi-element>bdi</a></code>
     <td>Text directionality isolation
     <td><pre class=example><code class='html'>The recommended restaurant is <strong><c- p>&lt;</c-><c- f>bdi</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;</c->My Juice Café (At The Beach)<c- p>&lt;/</c-><c- f>bdi</c-><c- p>&gt;</c-></strong>.</code></pre>

    <tr><td><code id=usage-summary:the-bdo-element><a href=#the-bdo-element>bdo</a></code>
     <td>Text directionality formatting
     <td><pre class=example><code class='html'>The proposal is to write English, but in reverse order. &quot;Juice&quot; would become &quot;<strong><c- p>&lt;</c-><c- f>bdo</c-> <c- e>dir</c-><c- o>=</c-><c- s>rtl</c-><c- p>&gt;</c->Juice<c- p>&lt;/</c-><c- f>bdo</c-><c- p>&gt;</c-></strong>&quot;&gt;</code></pre>

    <tr><td><code id=usage-summary:the-span-element><a href=#the-span-element>span</a></code>
     <td>Other
     <td><pre class=example><code class='html'>In French we call it <strong><c- p>&lt;</c-><c- f>span</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;fr&quot;</c-><c- p>&gt;</c->sirop de sureau<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c-></strong>.</code></pre>

    <tr><td><code id=usage-summary:the-br-element><a href=#the-br-element>br</a></code>
     <td>Line break
     <td><pre class=example><code class='html'>Simply Orange Juice Company<strong><c- p>&lt;</c-><c- f>br</c-><c- p>&gt;</c-></strong>Apopka, FL 32703<strong><c- p>&lt;</c-><c- f>br</c-><c- p>&gt;</c-></strong>U.S.A.</code></pre>

    <tr><td><code id=usage-summary:the-wbr-element><a href=#the-wbr-element>wbr</a></code>
     <td>Line breaking opportunity
     <td><pre class=example><code class='html'>www.simply<strong><c- p>&lt;</c-><c- f>wbr</c-><c- p>&gt;</c-></strong>orange<strong><c- p>&lt;</c-><c- f>wbr</c-><c- p>&gt;</c-></strong>juice.com</code></pre>

  </table>



  <nav><a href=grouping-content.html>← 4.4 Grouping content</a> — <a href=index.html>Table of Contents</a> — <a href=links.html>4.6 Links →</a></nav>
